Astro 框架中配置与使用 Tailwind CSS
- Date / 日期
- Updated / 更新
- 2026.03.27
- Reading / 阅读
- 6 Min
- Words / 字数
- 1093
- Tags / 标签
- #Astro#Tailwind CSS#前端#样式
Astro 框架中配置与使用 Tailwind CSS
Tailwind CSS 简介
Tailwind CSS 是一个实用优先的 CSS 框架，它提供大量原子类（如 p-4、text-center、bg-blue-500），让你无需离开 HTML 即可快速构建自定义设计。在 Astro 中使用 Tailwind 可以大幅提升开发效率，并保证最终样式文件的最小体积（通过 PurgeCSS 自动移除未使用的类）。
这篇记的是 Tailwind 3 时代的做法：配置写在 tailwind.config.js 里，通过 @astrojs/tailwind 集成挂上去。博客后来换成了 Tailwind 4，配置搬进了 CSS，新写法见《Tailwind CSS 4 在 Astro 里的配置》。
Tailwind CSS 的优势
在不支持 Tailwind CSS 的传统项目上为网页设计样式时，需要单独编写 CSS 样式。例如：
ChitChat
You have a new message!
<div class="chat-notification"> <div class="chat-notification-logo-wrapper"> <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" /> </div> <div class="chat-notification-content"> <h4 class="chat-notification-title">ChitChat</h4> <p class="chat-notification-message">You have a new message!</p> </div></div>
<style> .chat-notification { display: flex; align-items: center; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; } .chat-notification-content { margin-left: 1.5rem; } .chat-notification-title { color: #1a202c; font-size: 1.25rem; line-height: 1.25; } .chat-notification-message { color: #718096; font-size: 1rem; line-height: 1.5; }</style>而使用 Tailwind ，就可以直接在 HTML 中应用已有的类来样式化元素。
You have a new message!
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4"> <div class="shrink-0"> <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo" /> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-slate-500">You have a new message!</p> </div></div>效果与前面一致。
换到 Tailwind 之后，有三件事不用再操心了。
- 不用再给每个组件起名字：传统流程里每加一个组件都要想一个“完美的”类名，现在精力花在样式上就够了；
- CSS 文件不会再一路膨胀：以前每加一个组件就得往 CSS 里塞新规则，文件越滚越大；
- 还有一点：传统 CSS 的样式是全局的，改一处不知道会误伤哪里；Tailwind 的类只作用在写了它的那个元素上。
安装与配置
安装 Tailwind CSS
在 Astro 项目的根目录下运行以下命令来安装 Tailwind CSS 及其依赖：
npm install -D tailwindcss @astrojs/tailwind# 或yarn add -D tailwindcss @astrojs/tailwind# 或pnpm add -D tailwindcss @astrojs/tailwind这串命令安装了两个部分
tailwindcss：Tailwind CSS 的核心库@astrojs/tailwind：Astro 官方的 Tailwind 集成包
配置 Astro 和 Tailwind
在 astro.config.mjs/astro.config.js 中添加 Tailwind 集成：
import { defineConfig } from 'astro/config'import tailwind from '@astrojs/tailwind'
export default defineConfig({ integrations: [tailwind()],})生成 Tailwind 配置文件
执行以下命令自动生成 tailwind.config.js ：
npx tailwindcss init在生成的配置文件 tailwind.config.js 中添加所有模板文件的路径：
/** @type {import('tailwindcss').Config} */module.exports = { content: ['./src/**/*.{html,js}'], theme: { extend: {}, }, plugins: [],}Tailwind 的基本使用
在 Astro 组件中使用
在 .astro 组件的模板部分直接使用 Tailwind 类名：
---// 无需额外代码---
<div class="p-4 bg-blue-500 text-white rounded-lg"> <h1 class="text-2xl font-bold">Hello, Tailwind!</h1> <p class="mt-2">这是一个使用 Tailwind CSS 的 Astro 组件。</p></div>在 Markdown/MDX 中使用
在 .md 或 .mdx 文件中，同样可以直接使用 Tailwind 类，但有个前置条件
-
你可以选择在 Markdown 文件的头部中声明布局组件并且在布局组件中链接到
global.css：md ---layout: ../layouts/Layout.astro //其中链接了 global.css---<span class="text-blue-500">蓝色文字</span> -
或者你也可以在
tailwind.config.js中直接支持.md文件：tailwind.config.js /** @type {import('tailwindcss').Config} */module.exports = {content: ['./src/**/*.{html,js,md}'],theme: {extend: {},},plugins: [],}
响应式设计
Tailwind 的响应式靠前缀实现：sm:、md:、lg:、xl: 分别对应不同断点，hover: 这类状态前缀是同一套写法。
<div class="text-center sm:text-left md:text-right lg:text-center">响应式文本对齐</div>暗色模式
在 tailwind.config.js 中开启暗色模式策略（推荐使用 class 策略，以便手动调整）：
export default { darkMode: 'class', // ...}在 HTML 根元素上加 dark 类就会触发暗色模式。Astro 里也可以用变量来控制，比如：
---const isDark = false // 根据实际情况设置---
<html class={isDark ? 'dark' : ''}> <body> <slot /> </body></html>用到的时候写作 dark: 前缀：
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">主题自适应</div>
Comment评论