TailWindCss 核心功能总结

TailwindCSS是一款实用优先的原子化CSS框架，通过预定义类名组合快速构建界面，显著提升开发效率。其核心优势包括：实用类直接内联HTML减少样式文件切换、内置响应式设计系统、自动优化的生产包体积（<10KB）。特别适合Web应用开发，已被ChatGPT、Vercel等AI产品采用。提供完善的文档和IDE插件支持，支持自定义主题配置（通过tailwind.config.js）和动态类名

Dragon Wu

1212人浏览 · 2025-12-21 17:43:01

Dragon Wu · 2025-12-21 17:43:01 发布

二、为什么AI时代，TailWindCss更受欢迎

10、类名里使用tailwindcss v4

@apply

@utility

@theme

一、为什么选择

官方文档：https://tailwindcss.com/

🎯 核心优势

1. 实用优先的原子化 CSS

通过组合预定义的实用类快速构建界面
无需在 HTML 和 CSS 文件间频繁切换
减少自定义 CSS 代码量

2. 极致的开发体验

<!-- 传统方式 -->
<div class="card">...</div>
<style>
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<!-- Tailwind 方式 -->
<div class="p-4 rounded-lg shadow-sm">...</div>

3. 强大的响应式设计

<div class="text-sm md:text-base lg:text-lg">
  <!-- 移动端小字，桌面端正常 -->
</div>

⚡ 效率提升

开发速度

减少命名纠结时间
无需维护单独的 CSS 文件
设计系统一致性自动保证

维护性

样式与组件生命周期一致
不会产生未使用的 CSS
修改范围局部化

🎨 设计系统集成

开箱即用的设计规范

间距系统（p-4, m-2, gap-8）
颜色系统（text-gray-700, bg-blue-500）
排版层级（text-xs 到 text-6xl）

自定义配置灵活

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1D4ED8'
      }
    }
  }
}

🛠 生产优化

1. 极小的生产包体积

PurgeCSS 自动移除未使用的样式
典型项目最终 CSS 大小 <10KB

2. 性能优势

减少 HTTP 请求（无需额外 CSS 文件）
样式内联，渲染路径更短

🔄 现代开发友好

组件框架完美配合

React/Vue/Angular/Svelte 无缝集成
与组件作用域样式自然契合

热重载支持

修改样式立即看到效果
无需手动刷新

📱 移动优先理念

<!-- 默认移动端，逐步增强 -->
<button class="
  px-3 py-2        <!-- 移动端内边距 -->
  md:px-4 md:py-3  <!-- 平板端 -->
  lg:px-6 lg:py-4  <!-- 桌面端 -->
">
  按钮
</button>

🏢 团队协作优势

降低沟通成本

统一的样式命名规范
新人快速上手（学习曲线平缓）
减少样式冲突

设计一致性

设计师与开发者共用设计 token
视觉一致性自动保障

⚠️ 注意事项

学习曲线

需要记忆常用类名（但有很好的 IDE 插件）
初始 HTML 可能看起来"杂乱"

适用场景

✅ 适合：Web 应用、设计系统、原型开发
⚠️ 考虑：内容为主的静态网站、已有大型 CSS 代码库

💡 最佳实践建议

<!-- 避免：过度使用实用类 -->
<div class="p-4 m-2 bg-white rounded-lg shadow-md ... 20个类">

<!-- 推荐：提取组件 -->
<Button variant="primary">提交</Button>
<!-- 在组件内部使用 Tailwind -->

📊 生态系统

丰富的工具链

官方插件（Typography、Forms、Aspect Ratio）
社区插件丰富
VS Code/WebStorm 智能提示

主流框架支持

Next.js、Nuxt.js、Gatsby 官方集成
Vite、Create React App 无缝使用

🎖️ 第一部分总结

选择 Tailwind 当：

追求开发速度和一致性
团队需要统一设计语言
项目需要高度定制化设计
重视性能和包体积

考虑其他方案当：

已有成熟的 CSS 架构
需要完全控制 CSS 输出
项目对 CSS 有特殊架构要求

Tailwind CSS 已经成为现代前端开发的主流选择，特别适合需要快速迭代、保持一致性和追求开发效率的项目。

二、为什么AI时代，TailWindCss更受欢迎

在AI场景下，众多明星产品都选择了Tailwind CSS作为其样式解决方案，典型的案例包括：

OpenAI 的 ChatGPT：其标志性的简洁、响应迅速的对话界面，大量使用了Tailwind CSS来实现布局和样式。
Vercel AI Playground / SDK：作为前端开发领域的领导者，Vercel在其推出的官方AI相关产品、开发工具和模板库中，首选并大力推荐使用Tailwind CSS。
Hugging Face：作为全球最大的开源AI社区和平台，其网站界面的众多组件与布局也深度整合了Tailwind CSS。
其他明星应用：诸如 Midjourney、Perplexity AI、V0Dev 等众多知名AI应用的官方网站或产品界面，也都采用了Tailwind CSS作为核心的样式方案。

参考：Editor setup - Getting started - Tailwind CSS

三、项目结构化TailWindCss

项目创建时直接选择创建

像Nextjs这样的框架支持创建时直接结构化TailWindCss。

现有项目引入可直接参考：Framework guides - Tailwind CSS

使用相关开发插件提升开发速度：Tailwind CSS IntelliSense、Tailwind class sorter

四、核心用法

1、常用属性

在TailWindCss官网可以直接查询每个Css属性对应的常用尺寸或颜色等设置。

如：

size: 同时设置width和height属性

px：设置水平方向的padding

py：设置垂直方向的padding

text：设置font相关属性

......

例如：需要哪个属性直接查询对应的类名即可。

<!-- 传统方式 -->
<div class="card">...</div>
<style>
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>

<!-- Tailwind 方式 -->
<div class="p-4 rounded-lg shadow-sm">...</div>

2、自定义属性值

参考：Adding custom styles - Core concepts - Tailwind CSS

格式：对应属性-[自定义值]

字体颜色：text-[xxx]

背景颜色：bg-[xxx]

内外边距：p-[xxx]、m-[xxx]

......

<div className="bg-amber-500 text-[red] py-[100px] px-[100px] size-[100px] m-[20px]">
    <p>test tailwindcss</p>
</div>

3、伪类选择器

hover

通过hover:设置hover时的样式

<div className="bg-amber-500 text-[red] py-25 px-25 size-25 m-5 hover:bg-blue-300">
    <p>test tailwindcss</p>
</div>

多个伪类选择器

参考：Hover, focus, and other states - Core concepts - Tailwind CSS

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
  <!-- ... -->
</button>

4、Media

设置不同屏幕大小的样式

参考：Styling with utility classes - Core concepts - Tailwind CSS

<div class="grid grid-cols-2 sm:grid-cols-3">
  <!-- ... -->
</div>

5、暗黑模式样式

参考：Styling with utility classes - Core concepts - Tailwind CSS

6、使用自定义CSS

虽然强烈建议你为更复杂的组件创建合适的模板部分，但当模板部分显得生硬时，写一些自定义CSS完全没问题。

参考：Styling with utility classes - Core concepts - Tailwind CSS

<button class="btn-primary">Save changes</button>

@import "tailwindcss";
@layer components {
  .btn-primary {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-violet-500);
    padding-inline: --spacing(5);
    padding-block: --spacing(2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
}

不过，对于比单个HTML元素更复杂的情况，我们强烈建议使用模板部分，这样样式和结构可以集中在一个地方。

7、优先级

当你添加两个针对相同CSS属性的类时，样式表后面出现的类会获胜。

当你真的需要强制某个实用类生效，且没有其他方法管理该特定性时，你可以在类名末尾添加所有声明：`!``!important`

<div class="bg-teal-500 bg-red-500!">
  <!-- ... -->
</div>

@layer设置全局优先级，优先级顺序 (从高到低)：

1. 内联样式 (style="color: red;")
2. 非层样式 (直接写的 CSS)
3. @layer utilities
4. @layer components
5. @layer base
6. @theme 变量定义 (最低)

/* 例子1: 没有 @layer */
.custom-class { color: red; } /* 高优先级 */

/* 例子2: 使用 @layer base */
@layer base {
  .custom-class { color: red; } /* 低优先级 */
}

/* 例子3: 使用 @layer utilities */
@layer utilities {
  .custom-class { color: blue; } /* 中等优先级 */
}

/* 优先级顺序（从低到高）：
   1. @layer base
   2. @layer components  
   3. @layer utilities
   4. 无 @layer 的样式（最高）
*/

8、颜色

参考：Colors - Core concepts - Tailwind CSS

TailWindCss提供了常用的颜色列表，并支持相应的自定义写法：

9、动态设置类名

参考：Detecting classes in source files - Core concepts - Tailwind CSS

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

始终将道具映射到静态类名

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500 text-white",
    red: "bg-red-500 hover:bg-red-400 text-white",
    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",
  };
  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}

10、类名里使用tailwindcss v4

参考：Functions and directives - Core concepts - Tailwind CSS

@apply

<div className="my-custom">
    <p className="">test tailwindcss</p>
</div>

全局css里使用@apply

@import "tailwindcss";

.my-custom{
  @apply bg-amber-500 text-[red] py-25 px-25 size-25 m-5 hover:bg-blue-300
}

或者使用@utility

@import "tailwindcss";

@utility my-custom {
  @apply bg-amber-500 text-[red] py-25 px-25 size-25 m-5 hover:bg-blue-300
}

这种实现的效果和上面哪种效果一样。

@apply 主要有三个问题：

1. 可维护性问题：提取的类名会与Tailwind默认类解耦，更新时需要手动同步
2. CSS体积增加：每个@apply都会生成新的CSS规则，而不是复用现有工具类
3. 响应式/状态变体处理复杂：需要手动添加 `hover:`, `md:` 等前缀

替代方案：
- 直接使用工具类（首选）
- 使用React/Vue等组件封装样式
- 特殊情况下少量使用@apply，但避免深度嵌套

Tailwind官方已将其标记为“高级功能”，不建议过度使用。

@utility

工具类的主要用法：

<div className="my-custom-1">
    <p className="">test tailwindcss</p>
</div>
<div className="my-custom-2">
    <p className="">test tailwindcss</p>
</div>
<div className="my-custom-3">
    <p className="">test tailwindcss</p>
</div>


/* global.css */
@import "tailwindcss";

@theme {
  --color-1: yellow;
  --color-2: green;
  --color-3: blue;
}

@utility my-custom-* {
  background-color: --value(--color-*);
}

效果：这种用法就类似于tailwindcss里自定义属性值的写法了，不过这里是自定义类名。

注意这里的“*”号位置。

也可以结合主题使用：黑夜和白天两种效果。

<div className="size-50 theme-color">
    <p className="">test tailwindcss</p>
</div>


@import "tailwindcss";

@utility theme-color {
  background-color: green;

  @variant dark {
    background-color: blue;
  }
}

@theme

基本用法参考：Theme variables - Core concepts - Tailwind CSS

在自定义 CSS 中，如果你想使用 tailwind.config.js（或 v4 的 Vite 插件配置）中定义的设计令牌（如颜色、间距），可以使用 @theme 指令来保持一致性。

在@utility案例中可以使用到@theme里定义的样式值。

定义局部主题

/* 定义多个主题 */
@theme light {
  --color-bg: white;
  --color-text: black;
}

@theme dark {
  --color-bg: black;
  --color-text: white;
}

/* 切换主题 */
body {
  @theme light; /* 默认亮色 */
}

body.dark-mode {
  @theme dark; /* 暗色主题 */
}

应用实例

两种设置局部theme的方法

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* 应用到特定元素 */
.element {
  @theme inline;
}

/* 或通过自定义属性 */
.element {
  theme: inline;
}

单主题系统（不需要命名）

@theme {
  --color-background: var(--background);
  /* 其他变量定义 */
}

特点：

创建全局默认主题
自动应用到所有元素
无法创建多个主题

对比

特性	命名写法 (`@theme inline`)	不命名写法 (`@theme`)
作用范围	局部（需要显式应用）	全局（自动应用）
主题数量	可创建多个不同主题	只能有一个默认主题
应用方式	通过 `@theme` 指令或 `theme` 属性	自动生效
优先级	高于全局主题	基础主题

使用案例：

/* 全局主题：标准化颜色、尺寸等 */

@theme {
  /* 颜色 */
  --color-background: #ffffff;
  --color-foreground: #171717;

  --color-drak-red-purple: #612dae;
  --color-red-purple: #8b3dff;
  --color-dark-purple: #5949f8;
  --color-theme-purple: #6153fc;
  --color-light-purple: #8479fd;
  --color-theme-orange: #ff4b36;
  --color-logo-blue: #007bff;

  --color-error: #ff4d4f;
  --color-warning: #faad14;
  --color-success: #52c41a;
  --color-primary: #1677ff;

  /* 字体 */
  --font-sans: var(--font-geist-sans); /* 入口文件中已定义 */
  --font-mono: var(--font-geist-mono); /* 入口文件中已定义 */
}

/* 暗色主题 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0a0a0a;
    --color-foreground: #ededed;
  }
}

theme里定义的全局值会直接生成对应的css全局值，可以通过css的var(--custom)直接调用。

组件中调用：font-sans，text-theme-purple直接缩写。

<div className="flex justify-center items-center bg-zinc-50 min-h-screen font-sans">
    <main className="text-theme-purple">
        <p>hello</p>
    </main>
</div>

总结到此！