Merge pull request #459 from fishbrain/upgrade-to-tailwind-v4

Upgrade to Tailwind v4

index.css

@@ -1,55 +1,58 @@
-@tailwind base;
+@import 'tailwindcss';
 
-:root {
-  --c-text: #333;
-  --c-background: #fff;
-}
+@theme {
+  --tracking-tighter: -0.04em;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-text: #999;
-    --c-background: #1a1919;
-  }
-}
+  --leading-tight: 1.2;
 
-body {
-  color: var(--c-text);
-  background-color: var(--c-background);
-  transition: background-color 0.3s ease;
-}
+  --text-5xl: 2.5rem;
+  --text-6xl: 2.75rem;
+  --text-7xl: 4.5rem;
 
-.dark-mode-checkbox:checked ~ body {
-  --c-text: var(--c-dark-text);
-  --c-background: var(--c-dark-background);
+  --shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
+  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
 }
 
-blockquote {
-  @apply ml-4 pl-4 border-gray-400 border-l-4 italic;
-}
+@layer base {
+  :root {
+    --c-text: #333;
+    --c-background: #fff;
+  }
 
-figcaption {
-  @apply text-center italic py-2;
-}
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --c-text: #999;
+      --c-background: #1a1919;
+    }
+  }
 
-ul {
-  @apply list-inside list-disc;
-}
+  body {
+    color: var(--c-text);
+    background-color: var(--c-background);
+    transition: background-color 0.3s ease;
+  }
 
-li:not(:last-of-type) {
-  @apply mb-4;
-}
+  .dark-mode-checkbox:checked ~ body {
+    --c-text: var(--c-dark-text);
+    --c-background: var(--c-dark-background);
+  }
 
-/* Start purging... */
-@tailwind components;
-/* Stop purging. */
+  blockquote {
+    @apply ml-4 pl-4 border-gray-400 border-l-4 italic;
+  }
 
-/* Write you own custom component styles here */
+  figcaption {
+    @apply text-center italic py-2;
+  }
 
-/* Start purging... */
-@tailwind utilities;
-/* Stop purging. */
+  ul {
+    @apply list-inside list-disc;
+  }
 
-/* Your own custom utilities */
+  li:not(:last-of-type) {
+    @apply mb-4;
+  }
+}
 
 .markdown {
   @apply text-lg leading-relaxed;
@@ -75,5 +78,5 @@ li:not(:last-of-type) {
 }
 
 .markdown :not(pre) > code {
-  @apply bg-gray-400 px-1 rounded text-gray-900;
+  @apply bg-gray-400 px-1 rounded-sm text-gray-900;
 }

package.json

@@ -4,19 +4,20 @@
   "type": "module",
   "scripts": {
     "dev": "concurrently \"yarn dev:css\" \"npx @11ty/eleventy --serve --formats=md,html,png,jpg,jpeg,ico,webp,gif\"",
-    "dev:css": "tailwindcss -i index.css -o _site/assets/css/index.css --watch --postcss",
-    "build:css": "tailwindcss -i index.css -o _site/assets/css/index.css --postcss",
+    "dev:css": "npx @tailwindcss/cli -i index.css -o _site/assets/css/index.css --watch --postcss",
+    "build:css": "npx @tailwindcss/cli -i index.css -o _site/assets/css/index.css --postcss",
     "build": "yarn build:css && npx @11ty/eleventy --formats=md,html,png,jpg,jpeg,ico,webp,gif"
   },
   "license": "MIT",
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/cli": "^4.0.1",
+    "@tailwindcss/postcss": "4.0.0",
     "concurrently": "^9.1.2",
     "eleventy-plugin-reading-time": "^0.0.1",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "4.0.0"
   },
   "packageManager": "[email protected]"
 }

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };