Tailwind 4.x

Author: OzzyCzech

astro.config.mjs

@@ -1,22 +1,25 @@
-import {defineConfig, passthroughImageService} from 'astro/config';
+import { defineConfig, passthroughImageService } from 'astro/config';
 import starlight from '@astrojs/starlight';
-import tailwind from "@astrojs/tailwind";
 
 // Markdown plugins
 import links from './src/markdown/links.js';
 import youtube from './src/markdown/youtube.js';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://astro.build/config
 
 const site = 'https://ozzyczech.cz';
 export default defineConfig({
 	site,
+
 	markdown: {
 		remarkPlugins: [links, youtube]
 	},
+
 	image: {
 		service: passthroughImageService(),
 	},
+
 	integrations: [
 		starlight({
 			title: 'Roman\'s notes',
@@ -52,7 +55,9 @@ export default defineConfig({
 				{label: 'Hardware', collapsed: true, autogenerate: {directory: 'Hardware'}},
 				{label: 'Povídky', collapsed: true, autogenerate: {directory: 'Povidky'}},
 			]
-		}),
-		tailwind({applyBaseStyles: false})
-	]
+		})
+	],
+	vite: {
+		plugins: [tailwindcss()]
+	}
 });

package.json

@@ -16,10 +16,11 @@
 		"@astrojs/starlight-tailwind": "^3.0.0",
 		"@astrojs/tailwind": "^6.0.0",
 		"@sindresorhus/slugify": "^2.2.1",
+		"@tailwindcss/vite": "^4.0.6",
 		"astro": "^5.3.0",
 		"prettier": "^3.5.1",
 		"sharp": "^0.33.5",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.0.6",
 		"typescript": "^5.7.3",
 		"unist-util-visit": "^5.0.0"
 	}

src/components/Series.astro

@@ -9,9 +9,9 @@ const img = result.poster_path ? `https://image.tmdb.org/t/p/w500${result.poster
 const link = `https://www.themoviedb.org/tv/${result.id}`;
 const name = result.name;
 ---
-<li class="text-center !m-0">
+<li class="text-center m-0!">
 	<a href={link} target="_blank" class="p-0 m-0">
-		<img src={img} alt="${result.name}" class="rounded-lg shadow"/>
+		<img src={img} alt="${result.name}" class="rounded-lg shadow-sm"/>
 	</a>
-	<a href={link} title={name} target="_blank" class="inline-flex text-sm leading-normal no-underline hover:underline !text-inherit">{name}</a>
+	<a href={link} title={name} target="_blank" class="inline-flex text-sm leading-normal no-underline hover:underline text-inherit!">{name}</a>
 </li>

src/content/docs/Awesome/Watchlist.mdx

@@ -4,6 +4,8 @@ title: Watchlist
 
 import SeriesList from '../../../components/SeriesList.astro'
 
+### 2025
+
 ### 2024
 
 <SeriesList>

src/content/docs/Web Development/Tailwind/CSS Only tooltips.md

@@ -7,7 +7,7 @@ There's a plenty of libraries (mostly JavaScript) to enable the classic tooltip
 Lets starts with HTML code:
 
 ```html
-<div class="mx-auto my-20 max-w-prose divide-y rounded-2xl border shadow">
+<div class="mx-auto my-20 max-w-prose divide-y rounded-2xl border shadow-sm">
   <div class="py-20 text-center">
     <span aria-label="Content extra long">Hover this</span>
   </div>

src/content/docs/Web Development/Tailwind/Checkbox as toggle switch.md

@@ -46,7 +46,7 @@ Then you have to add follow code to your `tailwind.css` file:
 
     @apply after:bg-white dark:after:bg-gray-50;
     @apply before:bg-gray-300 dark:before:bg-gray-600;
-    @apply before:checked:bg-lime-500 dark:before:checked:bg-lime-500;
+    @apply checked:before:bg-lime-500 dark:checked:before:bg-lime-500;
     @apply checked:after:duration-300 checked:after:translate-x-4;
 
     @apply disabled:after:bg-opacity-75 disabled:cursor-not-allowed;

src/content/docs/Web Development/Tailwind/Dropdown menu.md

@@ -17,7 +17,7 @@ Let's have button first:
 <button
   data-dropdown="userMenu"
   aria-expanded="false"
-  class="border rounded py-2 px-3 shadow"
+  class="border rounded-sm py-2 px-3 shadow-sm"
   l
 >
   Show menu
@@ -29,7 +29,7 @@ and some simple dropdown menu:
 ```html
 <div
   id="userMenu"
-  class="hidden z-50 w-60 text-base bg-white rounded divide-y divide-gray-200 focus:outline-none"
+  class="hidden z-50 w-60 text-base bg-white rounded-sm divide-y divide-gray-200 focus:outline-hidden"
 >
   <ul>
     <li>

src/content/docs/Web Development/Tailwind/Form validation with Tailwind.md

@@ -44,8 +44,8 @@ Following [Tailwind code](https://tailwindcss.com/docs/hover-focus-and-other-sta
 ```css
 /* invalid and dirty or :user*/
 :is(input:user-invalid, input.dirty) {
-  @apply invalid:focus:ring-red-100 invalid:focus:dark:ring-red-500 invalid:focus:dark:ring-opacity-30;
-  @apply invalid:dark:bg-red-800/20 invalid:dark:border-red-900;
+  @apply invalid:focus:ring-red-100 dark:invalid:focus:ring-red-500 dark:invalid:focus:ring-opacity-30;
+  @apply dark:invalid:bg-red-800/20 dark:invalid:border-red-900;
   @apply invalid:bg-red-50 invalid:border-red-300;
 }
 ```
@@ -77,7 +77,7 @@ and full CSS example:
     @apply placeholder-gray-500 dark:placeholder-gray-400;
     @apply dark:border-gray-600 dark:focus:border-gray-500;
 
-    @a,pply focus:ring;
+    @a,pply focus:ring-3;
     @apply focus:ring-blue-200 dark:focus:ring-gray-600;
     @apply focus:ring-opacity-50 dark:focus:ring-opacity-50;
   }
@@ -88,8 +88,8 @@ and full CSS example:
 
 /* invalid and dirty or :user*/
 :is(input:user-invalid, input.dirty) {
-  @apply invalid:focus:ring-red-100 invalid:focus:dark:ring-red-500 invalid:focus:dark:ring-opacity-30;
-  @apply invalid:dark:bg-red-800/20 invalid:dark:border-red-900;
+  @apply invalid:focus:ring-red-100 dark:invalid:focus:ring-red-500 dark:invalid:focus:ring-opacity-30;
+  @apply dark:invalid:bg-red-800/20 dark:invalid:border-red-900;
   @apply invalid:bg-red-50 invalid:border-red-300;
 }
 ```

src/content/docs/Web Development/Tailwind/Password component.md

@@ -22,12 +22,12 @@ Then add following HTML code:
       name="password"
       autocompletetype="password"
       x-autocompletetype="password"
-      class="block w-full border-gray-200 rounded-l border-t border-l border-b p-2 shadow-sm"
+      class="block w-full border-gray-200 rounded-l border-t border-l border-b p-2 shadow-xs"
       placeholder="Your password"
       required
     />
     <label
-      class="cursor-pointer border shadow-sm px-3 border-y border-r m-0 pt-2 rounded-r-md hover:bg-gray-100"
+      class="cursor-pointer border shadow-xs px-3 border-y border-r m-0 pt-2 rounded-r-md hover:bg-gray-100"
     >
       <input
         type="checkbox"

src/content/docs/Web Development/Tailwind/Radio select switch.md

@@ -6,7 +6,7 @@ This code snippet is a `radio` input based multiple select switch using Tailwind
 
 ```html
 <div class="flex h-screen w-full items-center justify-center">
-  <form class="w-full max-w-screen-sm">
+  <form class="w-full max-w-(--breakpoint-sm)">
     <div class="mb-3">
       <span class="mb-0.5 inline-flex font-medium"
         >Please chose one option:</span