feat(tailwindcss): upgrade TailwindCSS to v4

Author: ansidev

.gitignore

@@ -25,6 +25,6 @@ pnpm-debug.log*
 
 # VSCode Workspace
 astro-basic-template.code-workspace
-
+.history/
 # Astro directories
 .astro

.vscode/settings.json

@@ -8,4 +8,7 @@
  "typescriptHero.imports.insertSemicolons": false,
  "typescript.preferences.quoteStyle": "single",
  "javascript.preferences.quoteStyle": "single",
+ "cSpell.words": [
+ "leetcode"
+ ],
 }

astro.config.mjs

@@ -2,11 +2,10 @@ import fs from 'node:fs'
 
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
-import tailwind from '@astrojs/tailwind'
+import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'astro/config'
 import compress from 'astro-compress'
 import purgecss from 'astro-purgecss'
-
 import { loadEnv } from './dotenv.config'
 
 loadEnv()
@@ -22,7 +21,6 @@ if (baseURL.length === 0) {
 export default defineConfig({
  site: baseURL,
  integrations: [
- tailwind(),
  partytown({
  config: {
  forward: ['dataLayer.push'],
@@ -33,7 +31,10 @@ export default defineConfig({
  compress(),
  ],
  vite: {
- plugins: [rawFonts(['.ttf', '.woff'])],
+ plugins: [
+ rawFonts(['.ttf', '.woff']),
+ tailwindcss()
+ ],
  optimizeDeps: {
  exclude: [
  '@resvg/resvg-js',

package.json

@@ -22,11 +22,13 @@
  "@astrojs/partytown": "^2.0.2",
  "@astrojs/rss": "^4.0.0",
  "@astrojs/sitemap": "^3.0.3",
- "@astrojs/tailwind": "^6.0.0",
+ "@tailwindcss/postcss": "^4.1.4",
+ "@tailwindcss/vite": "^4.1.4",
  "astro": "5.7.10",
  "astro-compress": "^2.2.2",
  "astro-purgecss": "^5.0.0",
- "tailwindcss": "^3.3.5"
+ "postcss": "^8.5.3",
+ "tailwindcss": "^4.1.4"
  },
  "devDependencies": {
  "@commitlint/cli": "^19.0.0",
@@ -53,10 +55,8 @@
  "lodash.kebabcase": "^4.1.1",
  "mustache": "^4.2.0",
  "prettier-plugin-astro": "^0.14.0",
- "sass": "^1.77.8",
  "satori": "^0.12.0",
  "satori-html": "^0.3.2",
- "tailwindcss-themer": "^4.0.0",
  "tsx": "^4.2.0",
  "typescript": "^5.3.3",
  "typescript-eslint": "^8.0.0"