Migrate to Tailwind 4

astro.config.ts

@@ -1,10 +1,11 @@
 import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import react from '@astrojs/react';
-import tailwind from '@astrojs/tailwind';
 import icon from 'astro-icon';
 import { defineConfig } from 'astro/config';
 
+import tailwindcss from '@tailwindcss/vite';
+
 // must use relative imports, and their entire import subtrees
 import { remarkReadingTime } from './plugins/remark-reading-time.mjs';
 //
@@ -31,7 +32,7 @@ export default defineConfig({
     react(),
     mdx(),
     // applyBaseStyles: false prevents double loading of tailwind
-    tailwind({ applyBaseStyles: false }),
+    // tailwind({ applyBaseStyles: false }),
     icon({ iconDir: 'src/assets/icons' }),
     partytown({
       config: { forward: ['dataLayer.push'] },
@@ -42,5 +43,6 @@ export default defineConfig({
     build: {
       sourcemap: false,
     },
+    plugins: [tailwindcss()],
   },
 });

docs/working-notes/todo4.md

@@ -48,7 +48,18 @@ markdown link in new tab, styles
 my-prose-project
 semantic release, conventional commits
 ```
-// tailwind 4
-git checkout feat/tailwind4-v2
-
+------------------
+git checkout -b feat/tailwind4-v2
 
+where to see compiled tailwind output
+pogledaj layers u v4 docs
+vidi @layer components sto su predefinisane sa @utility
+----------
+not-* variant je sad dostupan 
+ne treba mi vise plugin
+plugin(({ addVariant }) => {
+  addVariant('not-first', '&:not(:first-child)');
+  addVariant('not-last', '&:not(:last-child)');
+}),
+--------------
+migrate all @apply in css to inline jsx classes

package.json

@@ -32,7 +32,7 @@
     "@astrojs/partytown": "^2.1.4",
     "@astrojs/react": "^4.2.1",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.5",
+    "@tailwindcss/vite": "^4.0.12",
     "@fontsource-variable/inter": "^5.2.5",
     "astro": "^5.4.2",
     "astro-embed": "^0.9.0",
@@ -56,14 +56,15 @@
     "reading-time": "^1.5.0",
     "sharp": "0.33.5",
     "tailwind-clip-path": "^1.0.0",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.0.2",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
     "@expressive-code/plugin-collapsible-sections": "^0.40.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@iconify-json/mdi": "^1.2.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/mdast": "^4.0.3",
     "@types/react": "^18.3.12",
@@ -81,7 +82,7 @@
     "satori": "^0.12.1",
     "satori-html": "^0.3.2",
     "serve": "^14.2.4",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.0.11",
     "typescript": "^5.8.2"
   },
   "packageManager": "[email protected]",

postcss.config.mjs

@@ -1,9 +1,6 @@
 const config = {
   plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/components/Header.astro

@@ -27,7 +27,7 @@ const activeNavItemPath = getActiveNavItemPath(routePathname);
   <div
     class={cn(
       'flex gap-2',
-      'group-[.menu-open]:flex-col md:!flex-row md:justify-between md:items-center',
+      'group-[.menu-open]:flex-col md:flex-row! md:justify-between md:items-center',
       'max-w-6xl py-2 px-4 md:mx-auto'
     )}
   >
@@ -64,7 +64,7 @@ const activeNavItemPath = getActiveNavItemPath(routePathname);
       class="select-none hidden md:block group-[.menu-open]:block mt-0 group-[.menu-open]:mt-2"
       aria-label="Site navigation"
     >
-      <ul class="flex gap-4 group-[.menu-open]:flex-col md:!flex-row md:items-center">
+      <ul class="flex gap-4 group-[.menu-open]:flex-col md:flex-row! md:items-center">
         {
           NAVIGATION_ITEMS.map(({ title, path }) => (
             <li>

src/components/Share.astro

@@ -47,6 +47,8 @@ const props = { ...defaultProps, ...shareProps };
 
 {/* his slot is broken */}
 <style is:global slot="astro-social-share-css">
+  @reference "../styles/main.css";
+
   .astro-social-share {
     @apply my-0;
   }

src/components/YouTube.astro

@@ -43,6 +43,8 @@ switch (size) {
 </div>
 
 <style is:global>
+  @reference "../styles/main.css";
+
   lite-youtube {
     @apply max-w-none rounded-button;
   }

src/components/astro-remote/Heading.astro

@@ -13,7 +13,7 @@ const href = `#${slug}`;
 ---
 
 <div class="flex gap-2 items-center group">
-  <a id={slug} {href} class="flex target:!outline-none">
+  <a id={slug} {href} class="flex target:outline-hidden!">
     <Icon
       name="mdi:link-variant"
       class="inline-block h-5 w-5 text-transparent group-hover:text-captions"

src/components/react/ScrollToTop.tsx

@@ -109,7 +109,7 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
         onClick={handleScrollToTop}
         className={cn(
           // default styles
-          'z-10 fixed bottom-6 right-6 rounded bg-base-200 border border-base-300',
+          'z-10 fixed bottom-6 right-6 rounded-sm bg-base-200 border border-base-300',
           // initial state
           hiddenClasses,
           // transition classes

src/constants/image.ts

@@ -68,7 +68,7 @@ export const IMAGE_SIZES = {
       widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG, TW_SCREENS.XL],
       sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.XL}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
       // for debugging
-      // class: `border-8 border-blue-500 [@media(max-width:475px)]:!border-yellow-300 [@media(max-width:768px)]:border-orange-500 [@media(max-width:1280px)]:border-red-500`,
+      // class: `border-8 border-blue-500 [@media(max-width:475px)]:border-yellow-300! [@media(max-width:768px)]:border-orange-500 [@media(max-width:1280px)]:border-red-500`,
     },
   },
 } as const satisfies ImageSizes;

src/layouts/Centered.astro

@@ -18,7 +18,7 @@ const { class: className } = Astro.props;
 <Base {...props}>
   <main
     id="main"
-    class={cn('flex-grow flex flex-col centered-px max-w-4xl py-4 lg:py-8', className)}
+    class={cn('grow flex flex-col centered-px max-w-4xl py-4 lg:py-8', className)}
   >
     <slot />
   </main>

src/layouts/FullWidth.astro

@@ -8,7 +8,7 @@ const props = Astro.props;
 ---
 
 <Base {...props}>
-  <main id="main" class="flex-grow flex flex-col">
+  <main id="main" class="grow flex flex-col">
     <slot />
   </main>
 </Base>

src/layouts/List.astro

@@ -19,7 +19,7 @@ const { title, description } = metadata;
       <h1 class="b-h1">{title}</h1>
       {description && <p class="b-p mb-5">{description}</p>}
     </slot>
-    <section class="flex-grow flex flex-col">
+    <section class="grow flex flex-col">
       <slot />
       <div class="mt-auto">
         {paginationProps && <Pagination {...paginationProps} class="mt-6" />}

src/libs/api/open-graph/template-html.ts

@@ -26,7 +26,7 @@ const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: Template
         <!-- left column -->
         <div class="w-[550px] flex flex-col justify-between mr-6">
           <!-- title -->
-          <div class="flex flex-grow text-6xl font-semibold mb-4">${limitedTitle}</div>
+          <div class="flex grow text-6xl font-semibold mb-4">${limitedTitle}</div>
 
           <!-- avatar and site -->
           <div class="flex items-center ${isLongSiteUrl ? 'flex-col justify-end items-start' : ''}">

src/pages/blog/[slug].astro

@@ -94,7 +94,7 @@ const metadata: Metadata = { title, description, image };
           fetchpriority="high"
           loading="eager"
           itemprop="image"
-          class="block max-w-full h-auto aspect-[16/8] object-cover"
+          class="block max-w-full h-auto aspect-16/8 object-cover"
           transition:name={getTransitionNameFromElementId({
             elementId: TRANSITION_ELEMENT_IDS.POST_CARD.HERO_IMAGE,
           })}

src/styles/base/base.css

@@ -9,4 +9,13 @@
     /* code blocks responsive font size */
     @apply [--expressive-code-font-size:0.875rem] md:[--expressive-code-font-size:1rem];
   }
+
+  /* v4 border color */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
 }

src/styles/base/my-prose.css

@@ -2,6 +2,7 @@
 
 /* prose override */
 @layer base {
+  /* not used with @apply */
   .my-prose:not(:where([class~='not-prose'], [class~='not-prose'] *)) {
     @apply prose prose-slate max-w-none dark:prose-invert;
 

src/styles/base/tags.css

@@ -11,55 +11,73 @@
   .b-h4 {
     @apply text-headings;
   }
+}
 
-  .b-h1 {
+@utility b-h1 {
+  @layer base {
     @apply text-3xl sm:text-4xl md:text-5xl;
     @apply font-bold;
     @apply mb-6 md:mb-8 lg:mb-10;
   }
+}
 
-  .b-h2 {
+@utility b-h2 {
+  @layer base {
     @apply text-2xl md:text-3xl;
     @apply font-bold;
     @apply mt-12 mb-6 md:mt-14 md:mb-8;
   }
+}
 
-  .b-h3 {
+@utility b-h3 {
+  @layer base {
     @apply text-xl md:text-2xl;
     @apply font-bold;
     @apply mb-4;
   }
+}
 
-  .b-h4 {
+@utility b-h4 {
+  @layer base {
     @apply text-base md:text-lg;
     @apply font-bold;
     @apply mb-2;
   }
+}
 
-  /* h5, h6 */
+/* h5, h6 */
 
-  .b-p {
+@utility b-p {
+  @layer base {
     @apply text-content;
     @apply text-base sm:text-lg;
   }
+}
 
-  /* vertical margins (my-) */
+/* vertical margins (my-) */
 
-  /* like p */
-  .b-p-my {
+/* like p */
+@utility b-p-my {
+  @layer base {
     @apply my-5 md:my-6;
   }
+}
 
-  /* my- like h2, mt-, mb- first and last child */
-  .b-h2-mt {
+/* my- like h2, mt-, mb- first and last child */
+@utility b-h2-mt {
+  @layer base {
     @apply mt-12 md:mt-14;
   }
+}
 
-  .b-h2-mb {
+@utility b-h2-mb {
+  @layer base {
     @apply mb-6 md:mb-8;
   }
+}
 
-  .b-h2-my {
+@utility b-h2-my {
+  @layer base {
     @apply b-h2-mb b-h2-mt;
   }
 }