feat(nx-plugin): update templates to use Tailwind version 4.x (#1692)

Author: MrBacony

packages/create-analog/files/postcss.config.cjs

@@ -1,7 +1,4 @@
-/* Tailwind directives  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
 /* You can add global styles to this file, and also import other style files */
 :root {

packages/create-analog/files/styles.css

@@ -211,8 +211,6 @@ async function init() {
   }
 
   if (!skipTailwind) {
-    addTailwindConfig(write, filesDir);
-    addPostCssConfig(write, filesDir);
     addTailwindDirectives(write, filesDir);
   }
 
@@ -230,7 +228,7 @@ async function init() {
   }
 
   if (!skipTailwind) {
-    addTailwindDevDependencies(pkg);
+    addTailwindDependencies(pkg);
   }
 
   if (pkgManager === 'yarn') {
@@ -370,27 +368,10 @@ function addTailwindDirectives(write, filesDir) {
   );
 }
 
-function addPostCssConfig(write, filesDir) {
-  write(
-    'postcss.config.cjs',
-    fs.readFileSync(path.join(filesDir, `postcss.config.cjs`), 'utf-8'),
-  );
-}
-
-function addTailwindConfig(write, filesDir) {
-  write(
-    'tailwind.config.ts',
-    fs.readFileSync(path.join(filesDir, `tailwind.config.ts`), 'utf-8'),
-  );
-}
-
-function addTailwindDevDependencies(pkg) {
-  ['tailwindcss@^3.3.1', 'postcss@^8.4.21', 'autoprefixer@^10.4.14'].forEach(
-    (packageName) => {
-      const [name, version] = packageName.split('@');
-      pkg.devDependencies[name] = version;
-    },
-  );
+function addTailwindDependencies(pkg) {
+  pkg.dependencies['tailwindcss'] = '^4.1.4';
+  pkg.dependencies['postcss'] = '^8.5.3';
+  pkg.dependencies['@tailwindcss/vite'] = '^4.1.4';
 }
 
 function addYarnDevDependencies(pkg, template) {

packages/create-analog/files/tailwind.config.ts

@@ -3,6 +3,10 @@
 import analog from '@analogjs/platform';
 import { defineConfig, Plugin, splitVendorChunkPlugin } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
+<% 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 }) => {
@@ -17,6 +21,9 @@ export default defineConfig(({ mode }) => {
       target: ['es2020'],
     },
     plugins: [
+      <% if (addTailwind) { %>
+      tailwindcss(),
+      <% } %>
       <% if (addTRPC) { %>
       analog({
         nitro: {

packages/create-analog/index.js

@@ -3,6 +3,10 @@
 import analog from '@analogjs/platform';
 import { defineConfig, Plugin, splitVendorChunkPlugin } 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 }) => {
@@ -17,15 +21,18 @@ export default defineConfig(({ mode }) => {
     <% } %>
     build: {
       outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client',
-      reportCompressedSize: true,    
+      reportCompressedSize: true,
       target: ['es2020'],
     },
     server: {
       fs: {
         allow: ['.'],
       },
-    },    
+    },
     plugins: [
+      <% if (addTailwind) { %>
+      tailwindcss(),
+      <% } %>
       <% if (addTRPC) { %>
       analog({
         nitro: {

packages/nx-plugin/src/generators/app/files/tailwind/latest/postcss.config.cjs__template__ renamed to packages/nx-plugin/src/generators/app/files/tailwind/v3/postcss.config.cjs__template__

@@ -3,6 +3,10 @@
 import analog from '@analogjs/platform';
 import { defineConfig, Plugin, splitVendorChunkPlugin } 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 }) => {
@@ -16,15 +20,18 @@ export default defineConfig(({ mode }) => {
     <% } %>
     build: {
       outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client',
-      reportCompressedSize: true,    
+      reportCompressedSize: true,
       target: ['es2020'],
     },
     server: {
       fs: {
         allow: ['.'],
       },
-    },    
+    },
     plugins: [
+       <% if (addTailwind) { %>
+      tailwindcss(),
+      <% } %>
       <% if (addTRPC) { %>
       analog({
         nitro: {

packages/nx-plugin/src/generators/app/files/tailwind/latest/tailwind.config.ts__template__ renamed to packages/nx-plugin/src/generators/app/files/tailwind/v3/tailwind.config.ts__template__

@@ -3,6 +3,10 @@
 import analog from '@analogjs/platform';
 import { defineConfig, Plugin } 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 }) => {
@@ -16,15 +20,18 @@ export default defineConfig(({ mode }) => {
     <% } %>
     build: {
       outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client',
-      reportCompressedSize: true,    
+      reportCompressedSize: true,
       target: ['es2020'],
     },
     server: {
       fs: {
         allow: ['.'],
       },
-    },    
+    },
     plugins: [
+      <% if (addTailwind) { %>
+      tailwindcss(),
+      <% } %>
       <% if (addTRPC) { %>
       analog({
         nitro: {

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

@@ -7,9 +7,11 @@ import {
 } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { test } from 'vitest';
+import { lt } from 'semver';
 
 import generator from './generator';
 import { AnalogNxApplicationGeneratorOptions } from './schema';
+import { checkAndCleanWithSemver } from '@nx/devkit/src/utils/semver';
 
 describe('nx-plugin generator', () => {
   const setup = async (
@@ -205,17 +207,42 @@ describe('nx-plugin generator', () => {
 
   const verifyTailwindIsSetUp = (
     tree: Tree,
-    devDependencies: Record<string, string>,
+    dependencies: Record<string, string>,
   ) => {
-    expect(devDependencies['tailwindcss']).toBeDefined();
-    const hasTailwindConfigFile = tree.exists(
-      'apps/tailwind-app/tailwind.config.ts',
-    );
-    const hasPostCSSConfigFile = tree.exists(
-      'apps/tailwind-app/postcss.config.cjs',
+    expect(dependencies['tailwindcss']).toBeDefined();
+
+    const version = checkAndCleanWithSemver(
+      'tailwindcss',
+      dependencies['tailwindcss'],
     );
-    expect(hasTailwindConfigFile).toBeTruthy();
-    expect(hasPostCSSConfigFile).toBeTruthy();
+
+    if (lt(version, '4.0.0')) {
+      const hasTailwindConfigFile = tree.exists(
+        'apps/tailwind-app/tailwind.config.ts',
+      );
+      const hasPostCSSConfigFile = tree.exists(
+        'apps/tailwind-app/postcss.config.cjs',
+      );
+      expect(hasTailwindConfigFile).toBeTruthy();
+      expect(hasPostCSSConfigFile).toBeTruthy();
+    } else {
+      expect(dependencies['@tailwindcss/vite']).toBeDefined();
+
+      console.log(tree.read('apps/tailwind-app/src/styles.css').toString());
+
+      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();
+    }
   };
 
   const verifyTrpcIsSetUp = (
@@ -309,7 +336,7 @@ describe('nx-plugin generator', () => {
 
       verifyHomePageExists(tree, analogAppName);
 
-      verifyTailwindIsSetUp(tree, devDependencies);
+      verifyTailwindIsSetUp(tree, dependencies);
     });
 
     it('creates an analogjs app in the source directory with trpc set up', async () => {
@@ -372,7 +399,7 @@ describe('nx-plugin generator', () => {
 
       verifyHomePageExists(tree, analogAppName);
 
-      verifyTailwindIsSetUp(tree, devDependencies);
+      verifyTailwindIsSetUp(tree, dependencies);
     });
 
     it('creates an analogjs app in the source directory with trpc set up', async () => {
@@ -438,7 +465,7 @@ describe('nx-plugin generator', () => {
 
       verifyHomePageExists(tree, analogAppName);
 
-      verifyTailwindIsSetUp(tree, devDependencies);
+      verifyTailwindIsSetUp(tree, dependencies);
     });
 
     it('creates an analogjs app in the source directory with trpc set up', async () => {
@@ -496,7 +523,7 @@ describe('nx-plugin generator', () => {
 
       verifyHomePageExists(tree, analogAppName);
 
-      verifyTailwindIsSetUp(tree, devDependencies);
+      verifyTailwindIsSetUp(tree, dependencies);
     });
 
     it('creates an analogjs app in the source directory without trpc due to unsupported Nx version', async () => {