fix: use tailwind css vite package for styling

Author: milan-codes

astro.config.mjs

@@ -1,16 +1,18 @@
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 import partytown from "@astrojs/partytown";
 import { remarkReadingTime } from "./remark-reading-time.mjs";
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
   integrations: [
-    tailwind(),
     partytown({
       config: {
         forward: ["dataLayer.push"],

bun.lockb

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@astrojs/partytown": "^2.1.3",
-    "@astrojs/tailwind": "^6.0.0",
+    "@tailwindcss/vite": "^4.0.8",
     "astro": "^5.3.1",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",

package.json

@@ -1,4 +1,6 @@
 ---
+import "../styles/global.css";
+
 export interface Props {
   title: string;
 }

src/layouts/BaseLayout.astro

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";