Migrate tailwindcss to v4, also use it from vite plugin

Author: egeakman

astro.config.mjs

@@ -3,14 +3,17 @@ import mdx from "@astrojs/mdx";
 import { h } from "hastscript";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 import remarkToc from "remark-toc";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import metaTags from "astro-meta-tags";
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
   markdown: {
     remarkPlugins: [
       [
@@ -38,9 +41,6 @@ export default defineConfig({
     mdx(),
     sitemap(),
     react(),
-    tailwind({
-      nesting: true,
-    }),
     metaTags(),
   ],
   output: "static",

package.json

@@ -16,9 +16,9 @@
     "@astrojs/mdx": "^4.1.0",
     "@astrojs/react": "^4.2.1",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/inter": "^5.1.1",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.12",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "astro": "^5.1.6",
@@ -33,7 +33,7 @@
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.12",
     "typescript": "^5.7.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -15,7 +15,10 @@ const resolvedIsExternal = isExternal !== undefined ? isExternal : url?.startsWi
 ---
 
 <a
-  class={`font-bold text-lg px-4 py-4 bg-button rounded-[60px] inline-block leading-4 hover:bg-button-hover not-prose
+  class={`font-bold text-lg px-4 py-4 bg-button rounded-[60px] leading-4 hover:bg-button-hover not-prose
+    // workaround for https://github.com/tailwindlabs/tailwindcss/issues/15884
+    // come on tailwind, was that really necessary?
+    ${className.includes("hidden") ? "hidden" : "inline-block"}
     ${secondary || disabled ? "bg-primary text-white hover:bg-primary-hover" : "text-text-inverted"}
     ${secondary ? "text-text" : ""}
     ${className || ""}

src/components/button-link/button-link.astro

@@ -7,8 +7,6 @@ export interface Props {
 }
 
 const { mobile = false }: Props = Astro.props;
-
-const IS_LIVE = false;
 ---
 
 <div class="ml-auto flex items-center space-x-4">
@@ -24,12 +22,6 @@ const IS_LIVE = false;
         <ButtonLink url="https://voting.europython.eu" className="hidden md:block">
           <span>Community vote</span>
         </ButtonLink>
-        {IS_LIVE && (
-          <ButtonLink url="/live">
-            Live
-            <span class="hidden md:inline"> 📺</span>
-          </ButtonLink>
-        )}
       </>
     ) : null
   }

src/components/header/header-actions.astro

@@ -1,7 +1,7 @@
 ---
 export interface Props {
   href?: string;
-  variant?: "standard" | "menu" | "live";
+  variant?: "standard" | "menu";
 }
 
 const { href, variant = "standard" } = Astro.props;
@@ -10,12 +10,10 @@ const { href, variant = "standard" } = Astro.props;
 <a
   class:list={[
     "font-bold text-lg px-4 py-4 bg-secondary rounded-[60px] inline-block leading-4",
-    "hover:bg-primary-hover hover:text-text-inverted",
+    "hover:bg-primary-hover hover:text-text-inverted, text-text-inverted",
     {
       "bg-text": variant === "menu",
       "bg-primary": variant === "standard",
-      "text-text-inverted": variant !== "live",
-      "bg-red": variant === "live",
     },
   ]}
   href={href}

src/components/header/header-button.astro

@@ -39,14 +39,8 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
             name: "Code of Conduct",
             path: "https://www.europython-society.org/coc/",
           },
-          /*
-            {
-              name: "Live 📺",
-              path: "/live",
-            },
-            */
           {
-            name: "Recordings",
+            name: "2024 Recordings",
             path: "https://www.youtube.com/playlist?list=PL8uoeex94UhE1CbtkDK4hevp2lBif57Nq",
           },
           ...links.header,

src/components/header/header.astro

@@ -14,6 +14,8 @@ import Prague from "../components/hero-section/prague.astro";
 import * as intro from "../data/home/intro.md";
 import * as venue from "../data/home/prague.mdx";
 
+import "../styles/global.css";
+
 let deadlines = await getCollection("deadlines");
 deadlines = deadlines
   .sort((a, b) => a.slug.localeCompare(b.slug))

src/pages/index.astro

@@ -423,6 +423,7 @@ posters.forEach((poster) => {
 </Layout>
 
 <style>
+  @reference "../../styles/global.css";
   :global(body) {
     overflow-x: hidden;
   }

src/pages/schedule/[day].astro

@@ -1,8 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-:root {
+@theme {
   --color-primary: #151f38;
   --color-primary-hover: #7a7ebd;
   --color-primary-active: #7a7ebd;
@@ -17,20 +15,44 @@
   --color-body-background: #f5e5d6;
   --color-hero-primary: #151f38;
   --color-hero-secondary: #fabc1b;
-
+  
   --color-session-neutral: #f5e5d6;
   --color-session-beginner: #63d452;
   --color-session-intermediate: #ffcd45;
   --color-session-advanced: #d34847;
+  
+  --color-sponsor-keystone: #5c9f92;
+  --color-sponsor-diamond: #568497;
+  --color-sponsor-platinum: #6b6c6e;
+  --color-sponsor-gold: #f5c251;
+  --color-sponsor-silver: #707172;
+  --color-sponsor-bronze: #6e6151;
+  --color-sponsor-patron: #a11217;
+}
+
+@theme {
+  --font-system: system-ui, sans-serif;
+  --font-title: "Inter Variable", -apple-system, BlinkMacSystemFont, Segoe UI, 
+                 Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, 
+                 Segoe UI Emoji, Segoe UI Symbol;
+  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 
+               Helvetica, Arial, sans-serif, Apple Color Emoji, 
+               Segoe UI Emoji, Segoe UI Symbol;
 }
 
-.tp-dfwv {
-  position: fixed !important;
-  z-index: 9999;
+@theme {
+  --aspect-ratio-hero: 2.4380530973;
 }
 
+@theme {
+  --tw-prose-headings: var(--color-text-inverted);
+}
+
+@plugin "@tailwindcss/typography";
+
 body {
-  @apply bg-body-background text-text;
+  background-color: var(--color-body-background);
+  color: var(--color-text);
 }
 
 .layout-wrapper {
@@ -50,6 +72,14 @@ body {
   grid-column: 1 / 4;
 }
 
+.prose {
+  color: var(--color-text);
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--tw-prose-headings);
+}
+
 .prose :is(h1, h2, h3, h4, h5, h6) a {
   text-decoration: none !important;
 }
@@ -105,7 +135,6 @@ ul.list-disc li::before {
   display: inline-block;
   width: 25px;
   height: 20px;
-  /*background-image: url(/img/list-item.svg);*/
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: 50% 50%;
@@ -117,6 +146,7 @@ ul.list-disc li::before {
 ul ul.list-disc li {
   list-style: disc;
 }
+
 ul ul.list-disc li::before {
   display: none;
 }