Tailwind CSS
Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量预定义的工具类，让您能够快速构建现代化的用户界面。
目录
基础概念
什么是 Tailwind CSS？
Tailwind CSS 是一个实用优先的 CSS 框架，它提供了大量预定义的工具类，让您能够直接在 HTML 中构建任何设计。
核心特点：
- 🎨 实用优先的方法
- 📱 响应式设计
- 🎯 状态变体支持
- ⚡ 高性能
- 🔧 高度可定制
与传统 CSS 的区别
/* 传统 CSS */
.button {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s;
}
.button:hover {
background-color: #2563eb;
}<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded-md font-medium transition-colors hover:bg-blue-600">
按钮
</button>安装与配置
使用 npm 安装
npm install -D tailwindcss
npx tailwindcss init配置文件 (tailwind.config.js)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}CSS 入口文件
@tailwind base;
@tailwind components;
@tailwind utilities;核心工具类
布局 (Layout)
容器 (Container)
<div class="container mx-auto px-4">
<!-- 内容居中，左右边距自动 -->
</div>显示 (Display)
<div class="block">块级元素</div>
<div class="inline">行内元素</div>
<div class="inline-block">行内块元素</div>
<div class="flex">弹性布局</div>
<div class="grid">网格布局</div>
<div class="hidden">隐藏元素</div>定位 (Positioning)
<div class="relative">相对定位</div>
<div class="absolute">绝对定位</div>
<div class="fixed">固定定位</div>
<div class="sticky">粘性定位</div>间距 (Spacing)
内边距 (Padding)
<div class="p-4">所有方向 1rem</div>
<div class="px-4 py-2">水平 1rem，垂直 0.5rem</div>
<div class="pt-4 pb-2 pl-3 pr-6">各方向不同</div>外边距 (Margin)
<div class="m-4">所有方向 1rem</div>
<div class="mx-auto">水平居中</div>
<div class="mt-8 mb-4">上下不同</div>尺寸 (Sizing)
宽度 (Width)
<div class="w-full">100% 宽度</div>
<div class="w-1/2">50% 宽度</div>
<div class="w-96">固定宽度 24rem</div>
<div class="w-auto">自动宽度</div>高度 (Height)
<div class="h-screen">视口高度</div>
<div class="h-64">固定高度 16rem</div>
<div class="h-full">100% 高度</div>颜色 (Colors)
背景色
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600">渐变背景</div>文字颜色
<div class="text-black">黑色文字</div>
<div class="text-white">白色文字</div>
<div class="text-gray-600">灰色文字</div>排版 (Typography)
字体大小
<h1 class="text-4xl">大标题</h1>
<h2 class="text-2xl">中标题</h2>
<p class="text-base">正文</p>
<span class="text-sm">小字</span>字体粗细
<div class="font-light">细体</div>
<div class="font-normal">正常</div>
<div class="font-medium">中等</div>
<div class="font-bold">粗体</div>
<div class="font-black">特粗</div>文本对齐
<div class="text-left">左对齐</div>
<div class="text-center">居中</div>
<div class="text-right">右对齐</div>
<div class="text-justify">两端对齐</div>边框 (Borders)
<div class="border">边框</div>
<div class="border-2 border-blue-500">蓝色粗边框</div>
<div class="border rounded-lg">圆角边框</div>
<div class="border-l-4 border-green-500">左边框</div>阴影 (Shadows)
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">特大阴影</div>
<div class="shadow-2xl">最大阴影</div>响应式设计
Tailwind CSS 使用移动优先的方法，默认样式适用于所有屏幕尺寸，然后使用断点前缀来应用更大屏幕的样式。
断点
sm:- 640px 及以上md:- 768px 及以上lg:- 1024px 及以上xl:- 1280px 及以上2xl:- 1536px 及以上
响应式示例
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- 移动端全宽，平板一半，桌面三分之一 -->
</div>
<div class="text-sm md:text-base lg:text-lg">
<!-- 响应式字体大小 -->
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<!-- 响应式网格 -->
</div>状态变体
悬停 (Hover)
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
悬停按钮
</button>焦点 (Focus)
<input class="border focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200" />激活 (Active)
<button class="bg-blue-500 active:bg-blue-800 text-white font-bold py-2 px-4 rounded">
激活按钮
</button>禁用 (Disabled)
<button class="bg-gray-400 text-gray-600 cursor-not-allowed" disabled>
禁用按钮
</button>自定义配置
扩展主题
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
500: '#3b82f6',
900: '#1e3a8a',
}
},
spacing: {
'128': '32rem',
'144': '36rem',
},
fontFamily: {
'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
'serif': ['Georgia', 'ui-serif'],
'mono': ['Fira Code', 'ui-monospace'],
},
},
},
}自定义组件
@layer components {
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
.card {
@apply bg-white rounded-lg shadow-md p-6;
}
}最佳实践
1. 组件化思维
<!-- 好的做法：使用语义化的类组合 -->
<button class="btn-primary">
主要按钮
</button>
<!-- 避免：过度使用工具类 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
主要按钮
</button>2. 响应式设计
<!-- 移动优先设计 -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
<div class="p-4 md:p-6 lg:p-8">
<h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-2 md:mb-4">
标题
</h3>
<p class="text-sm md:text-base text-gray-600">
内容描述
</p>
</div>
</div>3. 可访问性
<!-- 确保足够的颜色对比度 -->
<button class="bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none">
可访问按钮
</button>
<!-- 使用语义化标签 -->
<button class="sr-only">屏幕阅读器专用</button>4. 性能优化
// 只包含使用的样式
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
// 生产环境移除未使用的样式
purge: {
enabled: process.env.NODE_ENV === 'production',
},
}常用组件
卡片组件
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="image.jpg" alt="图片描述">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">卡片标题</div>
<p class="text-gray-700 text-base">
卡片内容描述，可以包含多行文本。
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#标签1
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
#标签2
</span>
</div>
</div>导航栏
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<a href="#" class="flex items-center py-4 px-2">
<span class="font-semibold text-gray-500 text-lg">Logo</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-blue-500 border-b-4 border-blue-500 font-semibold">首页</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-blue-500 transition duration-300">服务</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-blue-500 transition duration-300">关于</a>
<a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-blue-500 transition duration-300">联系</a>
</div>
</div>
</div>
</div>
</nav>表单
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
用户名
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="用户名">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
密码
</label>
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
<p class="text-red-500 text-xs italic">请输入密码。</p>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
登录
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
忘记密码？
</a>
</div>
</form>性能优化
1. 生产环境优化
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
// 生产环境移除未使用的样式
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'./src/**/*.{js,jsx,ts,tsx}',
'./public/index.html',
],
},
}2. 使用 JIT 模式
// tailwind.config.js
module.exports = {
mode: 'jit', // 启用 JIT 模式
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
}3. 自定义 CSS 变量
/* 使用 CSS 变量提高性能 */
:root {
--color-primary: #3b82f6;
--color-secondary: #64748b;
}
.btn-primary {
background-color: var(--color-primary);
}学习资源
官方资源
社区资源
工具
最后更新：2024年
最近更新：12/9/2025, 2:17:56 AM