Tailwind CSS 是一个高度可定制的、低级别的 CSS 框架，它允许你通过组合类来快速构建现代的、响应式的 UI。以下是关于如何使用 Tailwind CSS 的介绍和一些基本示例：
Tailwind CSS 可以通过 npm 或 yarn 安装，也可以通过 CDN 引入。
npm install tailwindcss
接下来，生成一个 tailwind.config.js 文件：
npx tailwindcss init
如果你不想使用 npm，你也可以直接在 HTML 文件中引入 Tailwind CSS：
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
tailwind.config.js 文件允许你自定义 Tailwind 的默认设计系统。默认的配置文件内容如下：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
Tailwind CSS 使用实用类（utility classes）来构建组件。以下是一些常见的用法示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<title>Tailwind CSS 示例</title>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<h1 class="text-4xl font-bold text-center text-blue-600">Hello, Tailwind CSS!</h1>
<p class="mt-4 text-lg text-gray-700">这是一个使用 Tailwind CSS 的基本示例。</p>
</div>
</body>
</html>
Tailwind 提供了简单的响应式设计类。以下示例展示了如何使用这些类：
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2">Card 1</h2>
<p class="text-gray-700">这是一个卡片组件。</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2">Card 2</h2>
<p class="text-gray-700">这是另一个卡片组件。</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2">Card 3</h2>
<p class="text-gray-700">这是第三个卡片组件。</p>
</div>
</div>
</div>
在 tailwind.config.js 文件中扩展主题：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {
colors: {
'custom-blue': '#1da1f2',
},
spacing: {
'128': '32rem',
},
},
},
plugins: [],
}
然后在你的 HTML 中使用这些自定义配置：
<div class="bg-custom-blue p-128">
<h1 class="text-white text-4xl">自定义颜色和间距</h1>
</div>
为了优化生产环境的 CSS 文件大小，你需要配置 purge 选项来删除未使用的 CSS 类。在 tailwind.config.js 中添加以下内容：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
purge: [
'./src/**/*.{html,js}',
],
}
然后使用以下命令来构建生产环境的 CSS 文件：
npx tailwindcss -o build.css --minify
以下是一个完整的 tailwind.config.js 配置示例，包含详细的注释来解释每个属性的用途和用法：
module.exports = {
// 指定需要扫描以生成 Tailwind CSS 的文件路径
content: [
'./src/**/*.{html,js}', // 可以根据项目结构调整路径
],
// 配置 Tailwind 的主题，覆盖或扩展默认配置
theme: {
extend: {
colors: {
'brand-blue': '#1da1f2', // 自定义颜色
},
spacing: {
'128': '32rem', // 自定义间距
},
},
},
// 添加 Tailwind CSS 插件
plugins: [
require('@tailwindcss/forms'), // 添加表单插件
require('@tailwindcss/typography'), // 添加排版插件
],
// 配置哪些变体类应生成
variants: {
extend: {
backgroundColor: ['active'], // 为活动状态添加背景色变体
},
},
// 设置暗模式策略，支持 'media'、'class' 或 false（禁用）
darkMode: 'class', // 使用类控制暗模式
// 增加 !important 声明到所有 Tailwind CSS 类，或者指定作用范围
important: true, // 所有 Tailwind CSS 类都将带有 !important 声明
// 启用或禁用核心插件
corePlugins: {
preflight: false, // 禁用预设样式
},
// 给所有 Tailwind CSS 类添加前缀
prefix: 'tw-', // 为防止与其他框架的样式冲突添加前缀
// 用于生成类名的分隔符
separator: '__', // 自定义类名分隔符
// 使用共享的 Tailwind 配置
presets: [
require('./custom-preset.js'), // 导入自定义预设
],
// 指定编译模式，默认为 'jit'（Just-In-Time 编译）
mode: 'jit', // 或 'aot'（Ahead-Of-Time 编译）
// 确保特定类不会被 purging
safelist: [
'bg-red-500', // 保留特定类
/^text-/, // 保留以 text- 开头的类
],
// 启用未来的 Tailwind CSS 特性
future: {
removeDeprecatedGapUtilities: true, // 移除已弃用的间距工具
purgeLayersByDefault: true, // 默认情况下删除未使用的样式层
},
// 启用实验性功能
experimental: {
applyComplexClasses: true, // 允许复杂类的应用
},
// 定义响应式断点
screens: {
sm: '640px', // 小屏幕断点
md: '768px', // 中等屏幕断点
lg: '1024px', // 大屏幕断点
xl: '1280px', // 超大屏幕断点
},
// 定义自定义颜色
colors: {
primary: '#ff0000', // 主要颜色
secondary: '#00ff00', // 次要颜色
},
// 定义自定义间距
spacing: {
'1': '0.25rem', // 1 单位间距
'2': '0.5rem', // 2 单位间距
'3': '0.75rem', // 3 单位间距
'4': '1rem', // 4 单位间距
},
// 配置容器插件
container: {
center: true, // 居中容器
padding: '2rem', // 容器内边距
},
}
Tailwind CSS 提供了一些官方插件来扩展其功能和增加新的实用类。以下是一些常用的 Tailwind CSS 插件：
@tailwindcss/forms
这个插件提供了默认的表单样式，简化了表单元素的样式设置。
安装：
npm install @tailwindcss/forms
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
}
@tailwindcss/typography
这个插件提供了丰富的排版选项，使长文内容的排版更美观。
安装：
npm install @tailwindcss/typography
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('@tailwindcss/typography'),
],
}
@tailwindcss/aspect-ratio
这个插件提供了用于设置元素宽高比的实用类。
安装：
npm install @tailwindcss/aspect-ratio
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('@tailwindcss/aspect-ratio'),
],
}
@tailwindcss/line-clamp
这个插件提供了用于截断文本的实用类。
安装：
npm install @tailwindcss/line-clamp
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('@tailwindcss/line-clamp'),
],
}
除了官方插件，还有一些流行的社区插件：
tailwindcss-animate
这个插件添加了许多有用的动画实用类。
安装：
npm install tailwindcss-animate
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('tailwindcss-animate'),
],
}
tailwindcss-gradients
这个插件为 Tailwind CSS 添加了渐变背景色实用类。
安装：
npm install tailwindcss-gradients
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('tailwindcss-gradients'),
],
}
tailwindcss-elevation
这个插件为 Tailwind CSS 添加了基于 material design 的阴影效果。
安装：
npm install tailwindcss-elevation
在 tailwind.config.js 中添加：
module.exports = {
plugins: [
require('tailwindcss-elevation')(['responsive']),
],
}