chore(tailwindcss): migrate to v4 CSS-first configuration #439

Author: Seme30

package.json

@@ -59,8 +59,8 @@
     "url": "github:atlas-bi/website"
   },
   "scripts": {
-    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx @tailwindcss/cli -i src/static/styles/global.css -c tailwind.config.js -o _site/static/css/style.css --minify && npm run updateSearch",
-    "build:ci": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx @tailwindcss/cli -i src/static/styles/global.css -c tailwind.config.js -o _site/static/css/style.css --minify",
+    "build": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production tailwindcss -i src/static/styles/global.css -o _site/static/css/style.css --minify && npm run updateSearch",
+    "build:ci": "ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production tailwindcss -i src/static/styles/global.css -o _site/static/css/style.css --minify",
     "start": "run-p 11ty:start tailwind:process",
     "11ty:start": "ELEVENTY_PRODUCTION=true  eleventy --serve --watch",
     "updateSearch": "dotenv node ./src/search/update-algolia-index.js",
@@ -72,7 +72,7 @@
     "format:prettier": "prettier --config .prettierrc \"src/**/*.{ts,css,less,scss,js,json,md,yaml,html}\" --write",
     "format:djlint": "djlint src -e njk --reformat --quiet --warn",
     "commit": "git add . && npm run pre-commit && cz --no-verify",
-    "tailwind:process": "npx @tailwindcss/cli -i src/static/styles/global.css -c tailwind.config.js -o _site/static/css/style.css --watch"
+    "tailwind:process": "tailwindcss -i src/static/styles/global.css -o _site/static/css/style.css --watch"
   },
   "lint-staged": {
     "src/**/*.{ts,css,less,scss,js,json,md,yaml,html}": [

src/safelist.html

@@ -0,0 +1,2 @@
+<!-- Safelist classes to ensure they are generated by Tailwind -->
+<div class="w-4 h-4 w-5 h-5 mt-8 rounded rounded-lg text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200 group flex whitespace-pre-wrap -ml-4 pl-4 absolute -ml-7 items-center opacity-0 border-0 group-hover:opacity-100 text-blue-400 hover:text-blue-800 transition-colors no-underline bg-slate-200 py-1 -my-1 border-b hover:text-slate-900 dark:hover:text-slate-400 text-sky-500 hover:text-sky-600 overflow-hidden relative w-full border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 bg-background text-foreground mb-1 font-medium leading-none text-sm [&_p]:leading-relaxed mt-0 bg-slate-900/80"></div>

src/static/styles/global.css

@@ -1,7 +1,63 @@
 @import "tailwindcss";
+
+/* stylelint-disable at-rule-no-unknown */
 @plugin "@tailwindcss/typography";
 @plugin "tailwindcss-animate";
 @plugin "tailwindcss-animated";
+@source "../../**/*.{html,njk,md,svg,js}";
+
+@theme {
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+/* stylelint-enable at-rule-no-unknown */
 
 @layer base {
   :root {