🚑 fix tailwind not building properly in production

hotfix, see tailwindlabs/tailwindcss#15278
okfde · Jan 27, 2025 · ef37353 · ef37353
1 parent 0bdf305
commit ef37353
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 39 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -41,6 +41,8 @@ jobs:
           SERVICE_ACCOUNT: ${{ secrets.SERVICE_ACCOUNT }}
       - name: Build
         run: pnpm run build
+      - name: Clean up after Tailwind
+        run: sed -i 's/@reference "\.\.\/assets\/style.css";//g' ./dist/_astro/*.css
       - name: Delete secrets
         run: rm .env service-account.json
       - name: Run Playwright tests

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,6 +1,7 @@
 // @ts-check
 import { defineConfig, envField } from 'astro/config'
 import tailwindcss from '@tailwindcss/vite'
+
 import vue from '@astrojs/vue'
 import Icons from 'unplugin-icons/vite'
 
@@ -10,7 +11,7 @@ export default defineConfig({
   integrations: [vue()],
   vite: {
     plugins: [
-      tailwindcss(),
+      // tailwindcss(),
       Icons({
         compiler: 'vue3',
       }),

diff --git a/package.json b/package.json
@@ -28,8 +28,10 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^22.10.5",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "^5.7.3"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1 @@
+export default { plugins: { '@tailwindcss/postcss': {} } }
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -11,57 +11,33 @@
 }
 
 .btn {
-  @apply inline-flex items-center px-4 py-2 text-white font-medium rounded-full font-bold cursor-pointer;
-  @apply bg-purple-700 hover:bg-purple-800 focus:ring-3 focus:ring-purple-600/50 outline-none motion-safe:transition;
+  @apply inline-flex cursor-pointer items-center rounded-full px-4 py-2 font-bold font-medium text-white;
+  @apply bg-purple-700 outline-none hover:bg-purple-800 focus:ring-3 focus:ring-purple-600/50 motion-safe:transition;
 }
 
 .btn.btn-lg {
-  @apply text-xl px-6 py-3;
+  @apply px-6 py-3 text-xl;
 }
 
 .btn:disabled {
-  @apply bg-gray-700 hover:bg-gray-800 focus:ring-gray-600/50 cursor-not-allowed;
+  @apply cursor-not-allowed bg-gray-700 hover:bg-gray-800 focus:ring-gray-600/50;
 }
 
 .btn-outline {
-  @apply inline-flex items-center px-4 py-2 hover:text-white rounded-full text-purple-700 font-bold cursor-pointer;
-  @apply border border-purple-700 hover:bg-purple-800 hover:text-white focus:ring-3 focus:ring-purple-600/50 outline-none motion-safe:transition;
+  @apply inline-flex cursor-pointer items-center rounded-full px-4 py-2 font-bold text-purple-700 hover:text-white;
+  @apply border border-purple-700 outline-none hover:bg-purple-800 hover:text-white focus:ring-3 focus:ring-purple-600/50 motion-safe:transition;
 }
 
 .btn-text {
-  @apply text-purple-900 inline-flex items-center focus:ring-3 focus:ring-purple-600/50 focus:ring-offset-1 outline-none motion-safe:transition rounded cursor-pointer;
+  @apply inline-flex cursor-pointer items-center rounded text-purple-900 outline-none focus:ring-3 focus:ring-purple-600/50 focus:ring-offset-1 motion-safe:transition;
 }
 
 .btn-text:disabled {
-  @apply text-gray-600 cursor-not-allowed;
+  @apply cursor-not-allowed text-gray-600;
 }
 
 h2 {
-  @apply text-xl md:text-4xl mb-2 font-medium;
-}
-
-@font-face {
-  font-family: 'Creato Display';
-  src: url('./CreatoDisplay-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Creato Display';
-  src: url('./CreatoDisplay-Bold.woff2') format('woff2');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Creato Display';
-  src: url('./CreatoDisplay-Regular.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
+  @apply mb-2 text-xl font-medium md:text-4xl;
 }
 
 @media (prefers-reduced-motion: no-preference) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default { plugins: { '@tailwindcss/postcss': {} } }