Astro 7 的Tailwind安裝與使用

前言

如果專案是 Astro 7（Vite 7），不要再使用以前的 npx astro add tailwind 或 @astrojs/tailwind。 Astro 官方目前建議直接使用 Tailwind CSS v4 + @tailwindcss/vite*， 安裝方式跟以前（Tailwind v3）完全不同。(Tailwind CSS) 最上面加入最上面加入

Step 1 安裝套件

npm install tailwindcss @tailwindcss/vite

以上是官方目前推薦的套件，現在不需要安裝： postcss、autoprefixer、@astrojs/tailwind

Step 2 修改 astro.config.mjs

加上：

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});

官方就是透過 Vite Plugin 啟用 Tailwind。

Step 3 修改 global.css

在src/styles/global.css加上：

@import "tailwindcss";

以下是 v3 的寫法。Tailwind v4 已經不再使用：

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4 匯入 CSS

在 Layout 最上面加入：

import "../styles/global.css";

之後所有頁面都會有 Tailwind。

Step 5 安裝plugin，恢復md檔預設版型

因為 Tailwind 不會替 HTML 元素提供預設排版樣式，所以一安裝tailwind後，md檔的排版會變得很「原始」…

還好 Tailwind 官方有提供 Typography Plugin（prose），專門處理 Markdown。

安裝

npm install @tailwindcss/typography

在 src/styles/global.css 加上：

@plugin "@tailwindcss/typography";

修改layout檔

<article class="prose lg:prose-xl dark:prose-invert">
  <Content />
</article>

就可以恢復漂亮的 Markdown 排版。