@lazarv/create-react-server 0.0.0-experimental-989cf02-20250217-d62ba1cb → 0.0.0-experimental-f35c661-20250227-d31930e2

package/globals.d.ts

@@ -57,3 +57,7 @@ declare module "lightningcss" {
     browsers: string[]
   ): Record<string, string>;
 }
+
+declare module "@tailwindcss/vite" {
+  export default function tailwindcssVitePlugin(): VitePlugin;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazarv/create-react-server",
-  "version": "0.0.0-experimental-989cf02-20250217-d62ba1cb",
+  "version": "0.0.0-experimental-f35c661-20250227-d31930e2",
   "bin": {
     "create-react-server": "index.mjs"
   },
@@ -39,7 +39,7 @@
     "picocolors": "^1.1.1",
     "prettier": "^3.0.0",
     "ts-morph": "^24.0.0",
-    "@lazarv/react-server": "0.0.0-experimental-d24f1e6-20250215-2e3908d4"
+    "@lazarv/react-server": "0.0.0-experimental-be787f2-20250217-12688b9b"
   },
   "engines": {
     "node": ">=20.10.0"

package/steps/features.mjs

@@ -30,11 +30,18 @@ export default async (context) => {
       checked: context.props.preset?.features.includes("prettier"),
     },
     {
-      name: "Tailwind CSS",
+      name: "Tailwind CSS v3",
       value: "tailwind",
-      description: "Add Tailwind CSS support",
+      description:
+        "Add Tailwind CSS v3 support (using PostCSS and Autoprefixer)",
       checked: context.props.preset?.features.includes("tailwind"),
     },
+    {
+      name: "Tailwind CSS v4",
+      value: "tailwind-v4",
+      description: "Add Tailwind CSS support (using the official Vite plugin)",
+      checked: context.props.preset?.features.includes("tailwind-v4"),
+    },
     {
       name: "Lightning CSS",
       value: "lightningcss",
@@ -234,17 +241,63 @@ import tsParser from "@typescript-eslint/parser";`,
   }
 
   if (answer.includes("tailwind")) {
+    if (!answer.includes("tailwind-v4")) {
+      partials["package.json"] = {
+        ...partials["package.json"],
+        merge: [
+          ...partials["package.json"].merge,
+          await json(context.env.templateDir, "package.tailwind.json"),
+        ],
+      };
+      partials["src/global.css"] = {
+        content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;`,
+      };
+      files.push(
+        join(context.env.templateDir, "tailwind.config.mjs"),
+        join(context.env.templateDir, "postcss.config.mjs")
+      );
+    } else {
+      context.env.logger.warn(
+        "You should not use different Tailwind CSS versions at the same time. Tailwind CSS v3 will not be installed."
+      );
+    }
+  }
+
+  if (answer.includes("tailwind-v4")) {
     partials["package.json"] = {
       ...partials["package.json"],
       merge: [
         ...partials["package.json"].merge,
-        await json(context.env.templateDir, "package.tailwind.json"),
+        await json(context.env.templateDir, "package.tailwind-v4.json"),
       ],
     };
-    files.push(
-      join(context.env.templateDir, "tailwind.config.mjs"),
-      join(context.env.templateDir, "postcss.config.mjs")
-    );
+    partials["src/global.css"] = {
+      content: `@import "tailwindcss";`,
+    };
+    if (answer.includes("ts")) {
+      partials["vite.config.ts"] = {
+        ...partials["vite.config.ts"],
+        merge: [
+          await readFile(
+            join(context.env.templateDir, "vite.config.tailwind-v4.ts"),
+            "utf8"
+          ),
+        ],
+      };
+    } else {
+      partials["vite.config.mjs"] = {
+        ...partials["vite.config.mjs"],
+        type: "code",
+        merge: [
+          await readFile(
+            join(context.env.templateDir, "vite.config.tailwind-v4.mjs"),
+            "utf8"
+          ),
+        ],
+      };
+    }
   }
 
   if (answer.includes("css-modules")) {

package/templates/package.tailwind-v4.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.9",
+    "tailwindcss": "^4.0.9"
+  }
+}

package/templates/vite.config.tailwind-v4.mjs

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

package/templates/vite.config.tailwind-v4.ts

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