fix(nx-plugin): generate postcss configuration for Tailwind (#1951)

Author: brandonroberts

packages/nx-plugin/src/generators/app/files/tailwind/v4/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

packages/nx-plugin/src/generators/app/files/tailwind/v4/tailwind.config.ts__template__

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+import { createGlobPatternsForDependencies } from '@nx/angular/tailwind';
+import { join } from 'node:path';
+
+export default {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html,md,analog,ag}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

packages/nx-plugin/src/generators/app/files/template-angular/vite.config.ts__template__

@@ -3,10 +3,6 @@
 import analog from '@analogjs/platform';
 import { defineConfig } from 'vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
-<% if (addTailwind) { %>
-// @ts-expect-error @tailwindcss/vite currently uses mts. TypeScript is complaining this, but it works as expected.
-import tailwindcss from '@tailwindcss/vite';
-<% } %>
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -24,9 +20,6 @@ export default defineConfig(({ mode }) => {
       },
     },
     plugins: [
-      <% if (addTailwind) { %>
-      tailwindcss(),
-      <% } %>
       analog(),
       nxViteTsPaths(),
     ],

packages/nx-plugin/src/generators/app/generator.spec.ts

@@ -116,20 +116,17 @@ describe('nx-plugin generator', () => {
       expect(hasTailwindConfigFile).toBeTruthy();
       expect(hasPostCSSConfigFile).toBeTruthy();
     } else {
-      expect(dependencies['@tailwindcss/vite']).toBeDefined();
+      expect(dependencies['@tailwindcss/postcss']).toBeDefined();
 
+      const hasPostCSSConfigFile = tree.exists(
+        'apps/tailwind-app/.postcssrc.json',
+      );
       const hasCorrectCssImplementation = tree
         .read('apps/tailwind-app/src/styles.css')
         .includes(`@import 'tailwindcss';`);
 
-      const regex = /plugins: \[.*\btailwindcss\(\)/s;
-
-      const viteConfig = tree
-        .read('apps/tailwind-app/vite.config.ts')
-        .toString();
-
-      expect(regex.test(viteConfig)).toBeTruthy();
       expect(hasCorrectCssImplementation).toBeTruthy();
+      expect(hasPostCSSConfigFile).toBeTruthy();
     }
   };
 

packages/nx-plugin/src/generators/app/lib/add-tailwind-helpers.ts

@@ -57,7 +57,7 @@ export function addTailwindRequiredPackages(tree: Tree): GeneratorCallback {
     {
       postcss: pkgVersions.postcss,
       tailwindcss: pkgVersions.tailwindcss,
-      '@tailwindcss/vite': pkgVersions['@tailwindcss/vite'],
+      '@tailwindcss/postcss': pkgVersions['@tailwindcss/postcss'],
     },
     {},
   );
@@ -245,4 +245,17 @@ export function addTailwindConfigFile(
     );
     return;
   }
+
+  if (tailwindInstalledVersion === '4') {
+    generateFiles(
+      tree,
+      joinPathFragments(__dirname, '..', 'files', 'tailwind/v4'),
+      project.root,
+      {
+        relativeSourceRoot: relative(project.root, project.sourceRoot),
+        template: '',
+      },
+    );
+    return;
+  }
 }

packages/nx-plugin/src/generators/app/versions/tailwind-dependencies.ts

@@ -7,7 +7,7 @@ import {
 const tailwindDependencyKeys = [
   'postcss',
   'tailwindcss',
-  '@tailwindcss/vite',
+  '@tailwindcss/postcss',
 ] as const;
 
 export type TailwindDependency = (typeof tailwindDependencyKeys)[number];
@@ -19,6 +19,6 @@ export const getTailwindDependencies = (): Record<
   return {
     postcss: V18_X_POSTCSS,
     tailwindcss: V18_X_TAILWINDCSS,
-    '@tailwindcss/vite': V18_X_TAILWINDCSS_VITE,
+    '@tailwindcss/postcss': V18_X_TAILWINDCSS_VITE,
   };
 };

packages/nx-plugin/src/generators/preset/__snapshots__/generator.spec.ts.snap

@@ -117,9 +117,6 @@ import analog from '@analogjs/platform';
 import { defineConfig } from 'vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 
-// @ts-expect-error @tailwindcss/vite currently uses mts. TypeScript is complaining this, but it works as expected.
-import tailwindcss from '@tailwindcss/vite';
-
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   return {
@@ -135,7 +132,7 @@ export default defineConfig(({ mode }) => {
         allow: ['.'],
       },
     },
-    plugins: [tailwindcss(), analog(), nxViteTsPaths()],
+    plugins: [analog(), nxViteTsPaths()],
     test: {
       globals: true,
       environment: 'jsdom',