tailwind v4

rossrobino · Jan 15, 2025 · 7ab1dd4 · 7ab1dd4
1 parent b8f1081
commit 7ab1dd4
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 53 deletions.
diff --git a/.changeset/brave-hairs-watch.md b/.changeset/brave-hairs-watch.md
@@ -0,0 +1,5 @@
+---
+"create-domco": patch
+---
+
+update to tailwindcss v4 beta
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/create-domco/src/dependencies/index.ts b/packages/create-domco/src/dependencies/index.ts
@@ -3,10 +3,9 @@ import { version } from "domco/version";
 export const getDependencies = async () => {
 	return {
 		domco: version,
-		autoprefixer: "10.4.20",
 		prettier: "3.4.2",
-		prettierTailwind: "0.6.9",
-		tailwind: "3.4.17",
+		prettierTailwind: "0.6.10",
+		tailwind: "4.0.0-beta.9",
 		typescript: "5.7.3",
 		vite: "6.0.7",
 	};

diff --git a/packages/create-domco/src/index.ts b/packages/create-domco/src/index.ts
@@ -8,7 +8,6 @@ import packageJson from "./template-files/package-json.js";
 import pageHtml from "./template-files/page-html.js";
 import prettier from "./template-files/prettier.js";
 import styleCss from "./template-files/style-css.js";
-import tailwind from "./template-files/tailwind.js";
 import tsconfigJson from "./template-files/tsconfig-json.js";
 import viteConfig from "./template-files/vite-config.js";
 import * as p from "@clack/prompts";
@@ -142,7 +141,6 @@ const getAllTemplateFiles: GetTemplateFile = async (options) => {
 		pageHtml,
 		prettier,
 		styleCss,
-		tailwind,
 		tsconfigJson,
 		viteConfig,
 	];

diff --git a/packages/create-domco/src/template-files/deno-json.ts b/packages/create-domco/src/template-files/deno-json.ts
@@ -22,14 +22,14 @@ const getTemplateFiles: GetTemplateFile = ({
 		}
 	},
 	"nodeModulesDir": "manual",
-	"imports": {
+	"imports": {${tailwind ? `"@tailwindcss/vite": "npm:@tailwindcss/vite@^${dependencies.tailwind}",` : ""}
 		"domco": "npm:domco@^${dependencies.domco}",${prettier ? `\n\t\t"prettier": "npm:prettier@^${dependencies.prettier}",` : ""}${
 			prettier && tailwind
 				? `\n\t\t"prettier-plugin-tailwindcss": "npm:prettier-plugin-tailwindcss@^${dependencies.prettierTailwind}",`
 				: ""
 		}${
 			tailwind
-				? `\n\t\t"tailwindcss": "npm:tailwindcss@^${dependencies.tailwind}",\n\t\t"autoprefixer": "npm:autoprefixer@^${dependencies.autoprefixer}",`
+				? `\n\t\t"tailwindcss": "npm:tailwindcss@^${dependencies.tailwind}",`
 				: ""
 		}
 		"vite": "npm:vite@^${dependencies.vite}"

diff --git a/packages/create-domco/src/template-files/package-json.ts b/packages/create-domco/src/template-files/package-json.ts
@@ -24,16 +24,14 @@ const getTemplateFiles: GetTemplateFile = ({
 		"preview": "vite preview"
 		${prettier ? `,"format": "prettier --write ."` : ""}
 	},
-	"devDependencies": {
+	"devDependencies": {${tailwind ? `"@tailwindcss/vite": "^${dependencies.tailwind}",` : ""}
 		"domco": "^${dependencies.domco}",${prettier ? `"prettier": "^${dependencies.prettier}",` : ""}
 		${
 			prettier && tailwind
 				? `"prettier-plugin-tailwindcss": "^${dependencies.prettierTailwind}",`
 				: ""
 		}${
-			tailwind
-				? `"tailwindcss": "^${dependencies.tailwind}","autoprefixer": "^${dependencies.autoprefixer}",`
-				: ""
+			tailwind ? `"tailwindcss": "^${dependencies.tailwind}",` : ""
 		}"typescript": "^${dependencies.typescript}",
 		"vite": "^${dependencies.vite}"
 	}

diff --git a/packages/create-domco/src/template-files/page-html.ts b/packages/create-domco/src/template-files/page-html.ts
@@ -21,8 +21,8 @@ const getTemplateFiles: GetTemplateFile = ({ tailwind, projectName }) => {
 		<main>
 			<h1${tailwind ? ` class="text-3xl"` : ""}>${projectName}</h1>
 			<ul>
-				<li><a href="https://vitejs.dev">Vite</a></li>
-				<li><a href="https://domco.robino.dev">domco</a></li>
+				<li><a${tailwind ? ` class="underline"` : ""} href="https://vitejs.dev">Vite</a></li>
+				<li><a${tailwind ? ` class="underline"` : ""} href="https://domco.robino.dev">domco</a></li>
 			</ul>
 		</main>
 		<footer></footer>

diff --git a/packages/create-domco/src/template-files/style-css.ts b/packages/create-domco/src/template-files/style-css.ts
@@ -6,15 +6,19 @@ export const styleFileName = {
 } as const;
 
 const getTemplateFiles: GetTemplateFile = ({ tailwind }) => {
+	if (tailwind) {
+		return [
+			{
+				name: `src/${styleFileName.tailwind}`,
+				contents: `@import "tailwindcss";\n`,
+			},
+		];
+	}
+
 	return [
 		{
-			name: `src/${tailwind ? styleFileName.tailwind : styleFileName.base}`,
-			contents: tailwind
-				? `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-`
-				: ``,
+			name: `src/${styleFileName.base}`,
+			contents: "",
 		},
 	];
 };

diff --git a/packages/create-domco/src/template-files/tailwind.ts b/packages/create-domco/src/template-files/tailwind.ts
diff --git a/packages/create-domco/src/template-files/vite-config.ts b/packages/create-domco/src/template-files/vite-config.ts
@@ -6,16 +6,10 @@ const getTemplateFiles: GetTemplateFile = ({ lang, tailwind }) => {
 			name: `vite.config.${lang}`,
 			contents: `import { defineConfig } from "vite";
 import { domco } from "domco";
-${
-	tailwind
-		? `import tailwindcss from "tailwindcss"; import autoprefixer from "autoprefixer";`
-		: ``
-}
+${tailwind ? `import tailwindcss from "@tailwindcss/vite";` : ``}
 
 export default defineConfig({
-	plugins: [domco()],${
-		tailwind ? `css: {postcss: {plugins: [tailwindcss(), autoprefixer()]}}` : ``
-	}
+	plugins: [domco()${tailwind ? ", tailwindcss()" : ""}],
 });
 `,
 		},