TailWindCss 核心功能总结 - 教程

目录

一、为什么选择

 核心优势

1. 实用优先的原子化 CSS

2. 极致的开发体验

3. 强大的响应式设计

⚡ 效率提升

 设计系统集成

 生产优化

 现代开发友好

 移动优先理念

 团队协作优势

⚠️ 注意事项

 最佳实践建议

 生态系统

️ 第一部分总结

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

三、项目结构化TailWindCss

四、核心用法

1、常用属性

2、自定义属性值

3、伪类选择器

4、Media

5、暗黑模式样式

6、使用自定义CSS

7、优先级

8、颜色

9、动态设置类名

10、类名里使用tailwindcss v4

@apply

@utility

@theme

---

一、为什么选择

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

 核心优势

1. 实用优先的原子化 CSS

• 通过组合预定义的实用类快速构建界面

• 无需在 HTML 和 CSS 文件间频繁切换

• 减少自定义 CSS 代码量

2. 极致的开发体验

...
...

3. 强大的响应式设计

⚡ 效率提升

开发速度

• 减少命名纠结时间

• 无需维护单独的 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 无缝集成

• 与组件作用域样式自然契合

热重载支持

• 修改样式立即看到效果

• 无需手动刷新

 移动优先理念

按钮

 团队协作优势

降低沟通成本

• 统一的样式命名规范

• 新人快速上手（学习曲线平缓）

• 减少样式冲突

设计一致性

• 设计师与开发者共用设计 token

• 视觉一致性自动保障

⚠️ 注意事项

学习曲线

• 需要记忆常用类名（但有很好的 IDE 插件）

• 初始 HTML 可能看起来"杂乱"

适用场景

• ✅ 适合：Web 应用、设计系统、原型开发

• ⚠️ 考虑：内容为主的静态网站、已有大型 CSS 代码库

 最佳实践建议

提交

 生态系统

丰富的工具链

• 官方插件（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相关属性

......

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

...
...

2、自定义属性值

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

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

字体颜色：text-[xxx]

背景颜色：bg-[xxx]

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

......

test tailwindcss

3、伪类选择器

hover

通过hover:设置hover时的样式

test tailwindcss

多个伪类选择器

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

4、Media

设置不同屏幕大小的样式

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

5、暗黑模式样式

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

6、使用自定义CSS

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

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

Save changes
@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`

8、颜色

参考：Colors - Core concepts - Tailwind CSS

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

9、动态设置类名

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

始终使用完整的类名

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

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 {children};
}

10、类名里使用tailwindcss v4

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

@apply

test tailwindcss

全局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

工具类的主要用法：

test tailwindcss

test tailwindcss

test tailwindcss

/* global.css */
@import "tailwindcss";
@theme {--color-1: yellow;--color-2: green;--color-3: blue;
}
@utility my-custom-* {background-color: --value(--color-*);
}

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

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

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

test tailwindcss

@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 属性	自动生效
优先级	高于全局主题	基础主题

总结到此！