with tailwindcss

ThemePlate · Mar 22, 2024 · f037f8a · f037f8a
1 parent d4ddb4f
commit f037f8a
Show file tree

Hide file tree

Showing 7 changed files with 307 additions and 4 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,6 @@
 {
   "editorConfig": true,
   "printWidth": 120,
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
     	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>ThemePlate</title>
+		<title>ThemePlate Fields</title>
 	</head>
 
 	<body>

diff --git a/package.json b/package.json
@@ -13,6 +13,10 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.2",
+    "@tailwindcss/vite": "4.0.0-alpha.10",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "tailwindcss": "4.0.0-alpha.10",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,5 +1,5 @@
 export default function () {
 	return (
-		<h1>ThemePlate</h1>
+		<h1 className="text-center text-5xl md:text-6xl font-black tracking-wide">ThemePlate Fields</h1>
 	);
 }
diff --git a/src/main.css b/src/main.css
@@ -1,3 +1,5 @@
+@import 'tailwindcss';
+
 :root {
 	color: rgba(255, 255, 255, 0.87);
 	background-color: #242424;

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 import preact from '@preact/preset-vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact()],
+  plugins: [tailwindcss(), preact()],
 })