二、Tailwind CSS 核心概念和配置 ( 先期了解 )
一、功能类优先（Utility-First）
1.1 什么是功能类优先
功能类优先是 Tailwind CSS 的核心理念，它鼓励使用小型、单一用途的工具类（utility classes）直接在 HTML 中构建复杂的用户界面，而不是编写自定义 CSS。
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
div>
<div>
<div class="text-xl font-medium text-black">ChitChatdiv>
<p class="text-gray-500">你有新消息!p>
div>
div>
1.2 功能类优先的优势
无需为 CSS 命名
使用传统方法，您需要为每个元素创建自定义类名：
<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">ChitChath4>
<p class="chat-notification-message">你有新消息!p>
div>
div>
<style>
.chat-notification {
display: flex;
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;
padding-top: 0.25rem;
}
.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 中应用样式，无需命名：
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
div>
<div>
<div class="text-xl font-medium text-black">ChitChatdiv>
<p class="text-gray-500">你有新消息!p>
div>
div>
更快的 CSS 开发
使用 Tailwind，您可以直接在 HTML 中构建界面，而不需要在 HTML 和 CSS 文件之间切换：
- 无需为每个元素想出类名
- 无需维护单独的 CSS 文件
- 更容易理解和修改样式
响应式设计变得简单
Tailwind 提供了简单的响应式前缀，使响应式设计变得轻松：
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case studydiv>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new businessa>
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.p>
div>
div>
div>
可维护性
传统 CSS 的问题之一是随着项目增长，CSS 文件会变得越来越大，而 Tailwind 的功能类方法可以帮助您避免这个问题：
- CSS 文件大小不会随着 UI 复杂度增加而无限增长
- 更改一个组件不会影响其他组件
- 可以安全地删除模板而不担心破坏其他 UI
1.3 处理复杂度
当您的 HTML 变得复杂时，可以使用以下策略：
提取组件
对于重复的 UI 模式，可以提取为组件：
// 使用 React 提取组件
function Button({ color, children }) {
return (
);
}
提取常用类
使用 Tailwind 的 @apply 指令将常用类组合到自定义 CSS 类中：
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
<button class="btn-blue">保存更改button>
二、配置 Tailwind CSS
2.1 配置文件
Tailwind 的配置文件允许您自定义框架的各个方面，包括：
- 主题（颜色、字体、断点等）
- 响应式断点
- 暗色模式
- 插件
默认的配置文件如下：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
2.2 主题配置
您可以通过修改 theme 部分来自定义设计系统：
module.exports = {
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
2.3 插件
插件让您可以注册新的样式、组件、变体等：
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities, addComponents, e, config }) {
// 添加您的自定义样式
}),
]
}
三、预检样式（Preflight）
3.1 什么是 Preflight
Preflight 是 Tailwind 的基础样式层，它建立在 modern-normalize 之上，提供了：
- 边距和内边距重置
- 边框样式重置
- 字体和文本设置的标准化
3.2 默认样式
Preflight 包含以下关键特性：
- 边框样式重置
*,
::before,
::after {
border-width: 0;
border-style: solid;
}
- 移除默认外边距
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
- 图片处理
img,
video {
max-width: 100%;
height: auto;
}
3.3 禁用 Preflight
如果您不想使用 Preflight，可以在配置文件中禁用它：
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
总结
Tailwind CSS 通过功能类优先的方法彻底改变了 CSS 的编写方式，让开发者可以直接在 HTML 中应用样式，提高开发效率。通过灵活的配置系统和预检样式层，Tailwind 为开发者提供了强大的样式定制能力。通过配置文件，您可以完全控制框架的行为，而 Preflight 则确保了跨浏览器的一致性和现代化的默认样式。
参考链接
- Tailwind CSS 功能类优先
- Tailwind CSS 配置文档
- Tailwind CSS Preflight