Angular / Vite / TailwindCSS 4

[bjornharvold]

Based on Nx's current offerings, this is literally already done.

I would like a story for setting up an Angular app with esbuild and vite under the hood [as is currently possible].

I would like to be able to remove .postcssrc.json and instead would like to be able to have a hook for apps/my-app/vite.config.ts. That way I can add TailwindCSS 4 with the following:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

Currently, when I add vite.config.ts to my app, TailwindCSS 4 complains (I've tried adding [unsuccessfully] it to project root as well):

/Users/crash/git/monorepo-typescript/node_modules/tailwindcss/dist/lib.js:35
${H}`)}),d?R([]):(d=M(":root, :host",[]),d.src=b.src,R([d])),1}}});let V=Kr(f);if(a&&(V.important=a),x.length>0)for(let b of x)V.invalidCandidates.add(b);s|=await hi({designSystem:V,base:r,ast:t,loadModule:e,sources:w});for(let b of u)b(V);for(let b of c)b(V);if(d){let b=[];for(let[R,L]of V.theme.entries()){if(L.options&2)continue;let P=l(de(R),L.value);P.src=L.src,b.push(P)}let S=V.theme.getKeyframes();for(let R of S)t.push(se({theme:!0},[z([R])]));d.nodes=[se({theme:!0},b)]}if(g.length>0){for(let b of g){let S=M("&",b.nodes),R=b.params,L=V.parseVariant(R);if(L===null)throw new Error(`Cannot use \`@variant\` with unknown variant: ${R}`);if(Ee(S,L,V.variants)===null)throw new Error(`Cannot use \`@variant\` with variant: ${R}`);Object.assign(b,S)}s|=32}if(s|=Ve(t,V),s|=je(t,V),m){let b=m;b.kind="context",b.context={}}return I(t,(b,{replaceWith:S})=>{if(b.kind==="at-rule")return b.name==="@utility"&&S([]),1}),{designSystem:V,ast:t,sources:w,root:y,utilitiesNode:m,features:s,inlineCandidates:v}}async function yi(t,r={}){let{designSystem:i,ast:e,sources:n,root:s,utilitiesNode:a,features:f,inlineCandidates:u}=await bi(t,r);e.unshift(Ze(`! tailwindcss v${Mt} | MIT License | https://tailwindcss.com `));function c(v){i.invalidCandidates.add(v)}let d=new Set,m=null,g=0,w=!1;for(let v of u)i.invalidCandidates.has(v)||(d.add(v),w=!0);return{sources:n,root:s,features:f,build(v){if(f===0)return t;if(!a)return m??=be(e,i,r.polyfills),m;let x=w,y=!1;w=!1;let V=d.size;for(let S of v)if(!i.invalidCandidates.has(S))if(S[0]==="-"&&S[1]==="-"){let R=i.theme.markUsedVariable(S);x||=R,y||=R}else d.add(S),x||=d.size!==V;if(!x)return m??=be(e,i,r.polyfills),m;let b=ge(d,i,{onInvalidCandidate:c}).astNodes;return r.from&&I(b,S=>{S.src??=a.src}),!y&&g===b.length?(m??=be(e,i,r.polyfills),m):(g=b.length,a.nodes=b,m=be(e,i,r.polyfills),m)}}}async function so(t,r={}){let i=ve(t,{from:r.from}),e=await yi(i,r),n=i,s=t;return{...e,build(a){let f=e.build(a);return f===n||(s=oe(f,!!r.from),n=f),s},buildSourceMap(){return wi({ast:n})}}}async function uo(t,r={}){return(await bi(ve(t),r)).designSystem}function We(){throw new Error("It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.")}for(let t in vt)t!=="default"&&(We[t]=vt[t]);module.exports=We;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at Object.We [as default] (/Users/crash/git/monorepo-typescript/node_modules/tailwindcss/dist/lib.js:35:2121)
    at StylesheetPluginFactory.initPostcss (/Users/crash/git/monorepo-typescript/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:169:66)