migrate tailwindcss config

monicahq · Jan 29, 2025 · 6e6b593 · 6e6b593
1 parent 3977c54
commit 6e6b593
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 242 deletions.
diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --https",
+    "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "lint": "eslint *.js resources",
     "format": "prettier --write '**/*.{js,vue,css,scss,json,yml,md}'",
     "postinstall": "husky install",
@@ -18,8 +19,6 @@
     "@sentry/vue": "^8.51.0",
     "@simplewebauthn/browser": "^13.1.0",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.0",
-    "@tailwindcss/typography": "^0.5.16",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "ant-design-vue": "^4.2.6",
@@ -34,8 +33,6 @@
     "lint-staged": "^15.4.3",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "sass": "^1.83.4",
@@ -61,5 +58,8 @@
       "vendor/bin/pint"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0"
+  }
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,30 +1,11 @@
-@import 'charts.css' layer(base);
-@import 'ant-design-vue/dist/reset.css' layer(base);
-
 @import 'tailwindcss';
+@import 'charts.css/dist/charts.css' layer(base);
+@plugin '@tailwindcss/forms';
 
-@config '../../tailwind.config.js';
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
-body {
-  color: #343a4b;
+@theme {
+  --default-font-family: Nunito, var(--font-sans);
 }
 
 .icon-breadcrumb {

diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -23,7 +23,7 @@
         @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
         @inertiaHead
     </head>
-    <body class="font-sans antialiased bg-white dark:bg-gray-800 dark:text-gray-300">
+    <body class="font-sans antialiased bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300">
         @inertia
     </body>
 </html>
diff --git a/scripts/ci/package.sh b/scripts/ci/package.sh
@@ -50,10 +50,8 @@ ln -s $ROOT/eslint.config.js $package/
 ln -s $ROOT/jsconfig.json $package/
 ln -s $ROOT/LICENSE.md $package/
 ln -s $ROOT/package.json $package/
-ln -s $ROOT/postcss.config.js $package/
 ln -s $ROOT/README.md $package/
 ln -s $ROOT/SECURITY.md $package/
-ln -s $ROOT/tailwind.config.js $package/
 ln -s $ROOT/vite.config.js $package/
 ln -s $ROOT/yarn.lock $package/
 ln -s $ROOT/.devcontainer $package/

diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/vite.config.js b/vite.config.js
@@ -3,6 +3,7 @@ import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import basicSsl from '@vitejs/plugin-basic-ssl';
 import i18n from 'laravel-vue-i18n/vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
@@ -22,6 +23,7 @@ export default defineConfig(({ mode }) => {
           },
         },
       }),
+      tailwindcss(),
       i18n(),
       basicSsl(),
     ],