Tailwind CSS 核心基础概念通俗讲解

很多刚接触 Tailwind 的同学，看着一大堆简短的 class 类名会觉得眼花缭乱。其实它整套语法有一套统一的逻辑，弄懂这些基础概念，就不用死记硬背所有类名，遇到陌生写法也能快速看懂含义。

工具类优先（Utility‑First）：Tailwind 的核心理念

传统写CSS，一般是给DOM起一个语义化的类名，然后到CSS文件里写一堆样式属性。比如写一张卡片，会新建.card，在CSS中设置内边距、圆角、阴影、背景色等一大堆属性。

而 工具类优先（Utility‑First） 的思路完全反过来：框架提供大量只负责一件小事的原子小类，一个类对应一条或者少数几条CSS属性，直接写在HTML标签的class属性上，通过多个小类拼接组合，实现完整的界面效果。

举个简单对比：
传统CSS写法

.card {
  padding: 16px;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

<div class="card"></div>

Tailwind工具类写法，不需要额外写CSS文件：

<div class="p-4 rounded-lg bg-white shadow-sm"></div>

p‑4只负责内边距、rounded‑lg只负责圆角、bg‑white只控制背景色。把这些“积木”拼在一起，就得到卡片效果。
优点是不用绞尽脑汁想类名，不用来回切换CSS文件；缺点是HTML标签上class会变长。

修饰符前缀：给样式附加条件

Tailwind 大量使用:冒号作为分隔的修饰符前缀，前缀写在工具类前面，表示“满足某个条件时，才启用这个样式”。分为三大类：响应式前缀、交互状态前缀、暗色模式前缀。

1. 响应式前缀，实现多屏幕适配

采用移动优先规则，前缀代表「大于等于这个屏幕宽度时生效」，小屏幕默认样式写在不带前缀的类上。

前缀	最小生效宽度	常见设备场景
sm:	640px	横屏大屏手机
md:	768px	平板设备
lg:	1024px	笔记本电脑
xl:	1280px	桌面显示器
2xl:	1536px	超宽大屏显示器

示例：

<div class="text‑base md:text‑xl lg:text‑2xl">测试文字</div>

手机上是基础字号；平板以上字号变大；大屏笔记本字号进一步放大。

注意：不需要写max‑width，大于等于该尺寸就生效，更大屏幕会继承，除非更高阶前缀覆盖。

2. 交互状态前缀：hover、focus、active

专门处理鼠标悬浮、输入框聚焦、点击激活这类交互场景。

hover: 鼠标悬浮
focus: 获取焦点（输入框、按钮选中）
active: 鼠标点击按下瞬间

<button class="bg‑blue‑500 hover:bg‑blue‑700 active:bg‑blue‑800 text‑white p‑2">按钮</button>

默认蓝色，悬浮加深，点击按下颜色进一步加深，完全不用手写:hover伪类CSS。

3. dark: 暗色模式前缀

开启暗色模式配置后，dark:开头的类只会在暗黑主题下生效，浅色模式自动忽略该套样式。

<div class="bg‑white dark:bg‑gray‑800 text‑black dark:text‑white">
  浅色模式白底黑字，暗黑模式深底白字
</div>

常用工具类分组解析

间距（padding、margin）

p = padding 内边距；m = margin 外边距
方向后缀：pt上、pr右、pb下、pl左
数字规则：数字每+1代表4px；p‑4=16px，m‑8=32px。

<div class="p‑4 mt‑6">四周内边距16px，顶部外边距24px</div>

布局：Flex 和 Grid

Flex弹性布局：

<div class="flex justify‑between items‑center">
  <div>左边</div>
  <div>右边</div>
</div>

flex开启弹性盒；justify‑between两端分开对齐；items‑center垂直居中。

Grid网格布局：

<div class="grid grid‑cols‑3 gap‑4">
  <div>1</div><div>2</div><div>3</div>
</div>

grid开启网格；grid‑cols‑3一行3列；gap‑4格子之间间距。

文本、颜色、边框、尺寸

文字：text‑center居中，font‑bold加粗，text‑red‑500红色文字。数字500是色阶，数字越大颜色深浅会发生变化。
背景：bg‑gray‑200灰色背景。
边框：border border‑gray‑400灰色边框。
宽高：w‑64 h‑32设置固定宽高；w‑full宽度100%；h‑screen占满屏幕高度。

指令与三层 Layer（Tailwind3重点）

在Tailwind CSS3中，CSS入口文件会看到这三行指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

这代表三层样式层，优先级顺序 base < components < utilities，越往后优先级越高，后面样式可以覆盖前面的样式。

@tailwind base
基础重置层。主要是浏览器样式重置（Preflight），抹平不同浏览器的默认差异。适合放全局HTML标签默认样式，优先级最低。
@tailwind components
组件层。适合存放我们抽出来的复用组件类，比如自定义按钮、卡片样式。这里定义的样式，可以被工具类覆盖。一般搭配@apply指令，把一堆工具类合并成一个自定义类。
@tailwind utilities
工具类层，优先级最高。所有Tailwind自带原子工具类都在这里，HTML写的p‑4、bg‑blue‑500都来自这一层，保证工具类可以覆盖组件、基础层的样式。

版本提示：Tailwind4不再使用三段@tailwind，统一改为一行@import "tailwindcss";，分层逻辑内部仍然存在，写法简化。

使用@layer可以把自己写的自定义CSS放到指定层级：

@layer components {
  .my‑btn {
    @apply bg‑blue‑500 text‑white rounded‑lg px‑4 py‑2;
  }
}

这样就封装一个可复用按钮类，后续可以直接使用class="my‑btn"。

自定义配置、插件扩展

当框架自带颜色、尺寸不能满足项目，我们可以修改tailwind.config.js配置文件，扩展主题。
比如新增项目主题色：

module.exports = {
  theme:{
    extend:{
      colors:{
        primary:'#1D4ED8'
      }
    }
  }
}

之后就可以直接写text‑primary、bg‑primary使用自定义颜色。

插件则用来给Tailwind增加更多工具类，官方和社区都提供很多插件，可以在配置的plugins数组引入，实现表单美化、增强排版等能力。

小总结

Tailwind本质是“积木式”开发，工具类优先，用小类拼接得到最终UI；
:修饰符是条件开关，可以实现响应式、悬浮交互、暗黑模式；
类名命名有统一规律，记住前缀含义，很多类不用死记；
v3三层@tailwind分层决定样式优先级，自定义组件尽量放在components层；
不满足默认设计时，通过配置文件扩展颜色、尺寸，使用插件扩展能力。

学习时不必把全部类名背熟，写代码时查阅文档，写得多就会慢慢熟悉命名规则。

Tailwind CSS 基础概念