自学教程

Tailwind CSS 简介

Tailwind CSS 教程

通俗看懂 Tailwind CSS：不一样的前端样式框架

很多人写网页时，常常陷入反复写 CSS、想类名、处理样式冲突的烦恼。Tailwind CSS 的出现，换了一套思路来做网页样式，如今已经是前端非常热门的工具。

什么是 Tailwind CSS？

传统 CSS 框架，像 Bootstrap，会直接给你写好现成的按钮、卡片、导航组件。你直接套用现成组件，改改颜色大小就可以快速做出页面，但如果设计稿样式很特殊，修改现成组件往往很麻烦，需要大量覆盖原有样式。

Tailwind CSS 不走“给现成组件”这条路，它是一个工具类优先（Utility‑First） 的CSS框架。它提供一大堆最小单元的样式类，每一个类只负责一件小事，比如控制边距、文字颜色、背景、圆角。我们把这些小类拼接组合，在HTML标签上直接完成样式开发，不用频繁跳转到独立的.css文件写代码。

举个简单例子：我们要做一个蓝色背景、白色文字、带内边距、圆角的提示块。

传统写法：

  1. 在CSS文件新建一个类，写背景、文字颜色、padding、border‑radius；
  2. 回到HTML给div加上这个自定义类。

Tailwind写法：

<div class="bg-blue-500 text-white p-4 rounded-lg"> Hello, Tailwind CSS! </div>
  • bg‑blue‑500：设置蓝色背景
  • text‑white：文字变成白色
  • p‑4：设置16px内边距
  • rounded‑lg：设置大圆角

所有样式直接写在标签class里面，不用新建CSS代码，组合不同工具类就能得到想要的盒子效果。

Tailwind 的几大核心能力

1. 强大的响应式适配

网页要适配手机、平板、电脑屏幕，传统要写大量@media媒体查询。
Tailwind自带响应式修饰符，只需要在类前面加上前缀，就可以给不同屏幕设置不同样式。比如md:text‑xl代表：屏幕达到中等尺寸以上，文字变大。不需要手写媒体查询代码。

2. 轻松处理交互状态

鼠标悬浮、获取焦点、点击这类交互效果，用修饰符就可以实现。例如hover:bg-red-400，鼠标悬浮上去背景自动变红，不用写额外CSS伪类。

3. 原生支持暗黑模式

现在很多网站需要切换浅色/深色主题。Tailwind内置暗黑模式标记，只需要加上dark:前缀，就可以专门给夜间模式写一套样式，实现一键切换暗色界面。

4. 样式可以复用，也可以深度自定义

虽然是写一堆原子类在标签上，但重复出现的样式组合，可以抽成可复用组件。
同时整个框架高度可配置：颜色、间距、圆角、阴影全部可以在配置文件修改。项目需要的设计规范可以直接定义到框架内部，适配业务需求。

5. 打包后体积很小

很多人担心，这么多工具类，最后CSS文件会不会巨大？
生产打包时Tailwind会自动把页面没有用到的样式全部删除，最后输出的CSS体积往往很小，不会把全部几千个工具类都打包到线上文件里。

Tailwind VS Bootstrap，到底差别在哪

对比项Tailwind CSSBootstrap
开发思路原子小类自由组合，没有现成组件提供按钮、卡片等现成UI组件
自定义能力自由度极高，几乎可以实现任意设计修改自带组件经常需要覆盖原有样式
上手感受初期要熟悉大量类名，熟悉后效率很高开箱即用，但是定制复杂设计麻烦
样式文件打包自动清理无用样式，体积小完整框架体积偏大，需要手动精简
适合场景高度自定义设计、团队协作、原型快速开发快速套用通用模板页面

简单理解：Bootstrap像买一套现成家具，拿来就能用，但改款式麻烦；Tailwind像买一堆积木零件，没有成品家具，但你可以拼出任何想要的家具模样。

哪些场景适合用 Tailwind？

✅ 适合

  1. 快速原型开发：拿到设计稿，直接在HTML拼样式，快速出页面原型，不用反复来回切换CSS文件。
  2. 团队协作项目：全部样式基于统一配置，大家用同一套颜色、间距规则，减少随意写样式带来的混乱，降低样式冲突。
  3. 高度定制化页面：设计稿样式独特，没有现成组件可以直接套用。
  4. Vue、React等组件化项目：和组件搭配，组件内部把样式写在标签上，组件复用的时候样式跟着一起走。

❌ 不太适合

  1. 只有寥寥几个简单静态页面，引入框架会增加学习成本。
  2. 团队完全不接受原子类写法，统一习惯很难改变。

Tailwind 的缺点也要知道

  1. HTML标签的class会变得很长，一个标签上面堆一大串类名，HTML代码看着比较繁杂。
  2. 前期需要记忆大量工具类名，新手刚接触会有学习成本。
  3. 如果完全不做封装，复制粘贴一堆类，页面会有大量重复class，代码维护会变麻烦。（可以通过封装组件、@layer组件类解决这个问题）

总结

Tailwind CSS不是用来完全淘汰传统CSS，而是换了一套开发范式。
它把样式变成一块块积木，直接在HTML完成样式组装，减少了想类名、写大量重复CSS的痛苦。如果你经常要做定制化UI、团队多人协同写前端页面，它会极大提升开发效率；但同时也要做好组件封装，避免HTML出现一堆杂乱的长类名。

小提示：初学的时候可以搭配官方文档查询类名，不用死记硬背，写多了自然就熟悉。

标签：

0 条笔记