Astro 框架中配置与使用 Tailwind CSS

Tailwind CSS 简介

Tailwind CSS 是一个实用优先的 CSS 框架，它提供大量原子类（如 p-4、text-center、bg-blue-500），让你无需离开 HTML 即可快速构建自定义设计。在 Astro 中使用 Tailwind 可以大幅提升开发效率，并保证最终样式文件的最小体积（通过 PurgeCSS 自动移除未使用的类）。

Tailwind CSS 的优势

在不支持 Tailwind CSS 的传统项目上为网页设计样式时，需要单独编写 CSS 样式。例如：

ChitChat

You have a new message!

1
<div class="chat-notification">
2
  <div class="chat-notification-logo-wrapper">
3
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
4
  </div>
5
  <div class="chat-notification-content">
6
    <h4 class="chat-notification-title">ChitChat</h4>
7
    <p class="chat-notification-message">You have a new message!</p>
8
  </div>
9
</div>
10

11
<style>
12
  .chat-notification {
13
    display: flex;
14
    align-items: center;
15
    max-width: 24rem;
16
    margin: 0 auto;
17
    padding: 1.5rem;
18
    border-radius: 0.5rem;
19
    background-color: #fff;
20
    box-shadow:
21
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
22
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
  }
24
  .chat-notification-logo-wrapper {
25
    flex-shrink: 0;
26
  }
27
  .chat-notification-logo {
28
    height: 3rem;
29
    width: 3rem;
30
  }
31
  .chat-notification-content {
32
    margin-left: 1.5rem;
33
  }
34
  .chat-notification-title {
35
    color: #1a202c;
36
    font-size: 1.25rem;
37
    line-height: 1.25;
38
  }
39
  .chat-notification-message {
40
    color: #718096;
41
    font-size: 1rem;
42
    line-height: 1.5;
43
  }
44
</style>

而使用 Tailwind ，就可以直接在 HTML 中应用已有的类来样式化元素。

ChitChat

You have a new message!

1
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
2
  <div class="shrink-0">
3
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo" />
4
  </div>
5
  <div>
6
    <div class="text-xl font-medium text-black">ChitChat</div>
7
    <p class="text-slate-500">You have a new message!</p>
8
  </div>
9
</div>

效果与前面一致。

显然，使用 Tailwind 对前端的开发者更加的友好，它主要有以下好处：

不用费心去设计元素的类名或者 ID：在传统的流程中，每添加一个组件都需要费心为它分配一个“完美的”名称，而使用 Tailwind 就只需要把精力放在样式的设计上；
避免了 CSS 文件的不停膨胀：在传统的流程中，每次添加新的类别或者组件，都要更新 CSS 文件，导致 CSS 文件的大小不断膨胀；
更加安全的调整样式：用传统方法，CSS 的样式是全局的，做出更改时永远不知道会有什么隐性的破坏，使用 Tailwind 就很好的避免了这点。

安装与配置

安装 Tailwind CSS

在 Astro 项目的根目录下运行以下命令来安装 Tailwind CSS 及其依赖：

1
npm install -D tailwindcss @astrojs/tailwind
2
# 或
3
yarn add -D tailwindcss @astrojs/tailwind
4
# 或
5
pnpm add -D tailwindcss @astrojs/tailwind

这串命令安装了两个部分

tailwindcss ：Tailwind CSS 的核心库
@astrojs/tailwind ：Astro 官方的 Tailwind 集成包

配置 Astro 和 Tailwind

在 astro.config.mjs/astro.config.js 中添加 Tailwind 集成：

1
import { defineConfig } from 'astro/config'
2
import tailwind from '@astrojs/tailwind'
3

4
export default defineConfig({
5
  integrations: [tailwind()],
6
})

生成 Tailwind 配置文件

执行以下命令自动生成 tailwind.config.js ：

1
npx tailwindcss init

在生成的配置文件 tailwind.config.js 中添加所有模板文件的路径：

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ['./src/**/*.{html,js}'],
4
  theme: {
5
    extend: {},
6
  },
7
  plugins: [],
8
}

Tailwind 的基本使用

在 Astro 组件中使用

在 .astro 组件的模板部分直接使用 Tailwind 类名：

1
---
2
// 无需额外代码
3
---
4

5
<div class="p-4 bg-blue-500 text-white rounded-lg">
6
  <h1 class="text-2xl font-bold">Hello, Tailwind!</h1>
7
  <p class="mt-2">这是一个使用 Tailwind CSS 的 Astro 组件。</p>
8
</div>

在 Markdown/MDX 中使用

在 .md 或 .mdx 文件中，同样可以直接使用 Tailwind 类，但有个前置条件

你可以选择在 Markdown 文件的头部中声明布局组件并且在布局组件中链接到 global.css：

1
---
2
layout: ../layouts/Layout.astro //其中链接了 global.css
3
---
4

5
<span class="text-blue-500">蓝色文字</span>

或者你也可以在 tailwind.config.js 中直接支持 .md 文件：

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ['./src/**/*.{html,js,md}'],
4
  theme: {
5
    extend: {},
6
  },
7
  plugins: [],
8
}

响应式设计

Tailwind 提供了响应式的前缀，如：sm:、md:、lg:、xl:、hover:等：

1
<div class="text-center sm:text-left md:text-right lg:text-center">响应式文本对齐</div>

暗色模式

在 tailwind.config.js 中开启暗色模式策略（推荐使用 class 策略，以便手动调整）：

1
export default {
2
  darkMode: 'class',
3
  // ...
4
}

然后就可以在 HTML 的根元素上添加 dark 类以触发暗色模式。当然在 Astro 中也可以使用逻辑判断等方式来自动切换暗色模式：

1
---
2
const isDark = false // 根据实际情况设置
3
---
4

5
<html class={isDark ? 'dark' : ''}>
6
  <body>
7
    <slot />
8
  </body>
9
</html>

然后在使用的时候就可以直接：

1
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">主题自适应</div>