自学教程

Tailwind CSS 教程

Tailwind CSS 教程

Tailwind CSS通俗入门：工具优先的现代CSS框架

Tailwind CSS是当下非常流行的实用优先（Utility‑First）CSS框架。它不提供按钮、卡片、导航这类现成组件，而是提供大量原子化工具类，像搭乐高积木一样，直接在HTML标签上组合类名，快速实现自定义页面样式。

生活化类比
Bootstrap这类组件框架，好比商家已经做好的成套家具，拿来直接用；
Tailwind更像一堆积木零件（圆角、颜色、边距、弹性布局），零件全部给你，自由拼接，做出任意你想要的家具。

一、基础小例子

<!-- 蓝色背景、白色文字、内边距、圆角 -->
<div class="bg-blue-500 text-white p-4 rounded-lg">
    Hello, Tailwind CSS!
</div>

简单解释各个类名含义：

  • bg‑blue‑500：背景色蓝色500色阶
  • text‑white：文字白色
  • p‑4：padding内边距
  • rounded‑lg：大圆角

重点：每一个class只负责一件小事，多个工具类叠加，拼出完整样式。

二、和传统Bootstrap核心区别

项目BootstrapTailwind CSS
设计思想组件优先，提供现成卡片、按钮工具类优先，只提供最小原子单元，自己组合
定制修改Sass变量，改动有限配置文件，颜色、间距、圆角全部可以自定义
HTML类名少，标签干净标签上会写一串工具类
打包引入完整CSS构建时自动清除未使用样式，生产包很小，经常只有十几KB

Bootstrap适合快速套模板；Tailwind适合做高度定制化UI、设计师给的独特页面。

三、核心优点

  1. 不用频繁切换文件：写HTML的时候直接加类，不用来回跳转CSS文件写样式；
  2. 设计系统统一：颜色、间距、字号都来自统一配置，页面不会出现乱七八糟的边距、颜色；
  3. 生产体积小：Purge机制，打包删掉项目没用到的CSS，线上文件非常轻量；
  4. 响应式简单：内置md:、sm:前缀，一行实现多屏幕适配；
  5. 高度自定义：tailwind.config配置文件，可以改全部主题，新增颜色、尺寸。

四、缺点与争议

  1. HTML标签class字符串会很长，看起来密密麻麻，新手不习惯；
  2. 没有现成组件，按钮、弹窗、表格都要自己拼；实际项目一般搭配shadcn/ui这类组件源使用；
  3. 需要记忆大量工具类名，存在学习成本；
  4. 重复的一长串类，如果到处复制粘贴，维护麻烦。

解决重复样式的两种方案：

  1. Vue/React：封装组件，把一堆类写在组件内部；
  2. 原生模板：@apply指令，把一组工具类提取为一个自定义CSS类。
@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white py-2 px-4 rounded-lg;
  }
}

五、响应式写法（移动优先）

Tailwind默认移动优先，小屏幕样式写基础类，大屏加前缀：

  • sm: 小屏幕
  • md: 中等屏幕（平板）
  • lg: 大屏幕（桌面）

示例：小屏幕垂直排列，平板以上横向弹性布局

<div class="flex flex-col md:flex-row gap-4">
  <div>模块A</div>
  <div>模块B</div>
</div>

六、简单两种使用方式

1. CDN快速体验（适合演示、学习，不建议生产）

直接引入CDN，不用安装环境，快速写demo。

<script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
<div class="bg-green-500 p-4 rounded text-white">测试CDN</div>

2. 正式项目（Vue/React/Vite）

npm安装，配置tailwind.config，构建时自动处理，删除无用CSS，生产环境推荐。

七、配套生态

  • shadcn/ui：复制粘贴式组件库，基于Tailwind，组件源码落到你项目，可自由修改，现在最主流搭配；
  • 各种插件：表单、动画、暗色模式插件；
  • VSCode插件：Tailwind CSS IntelliSense，自动提示类名，写代码必备。

八、适合和不适合什么项目

✅适合：

  • 高度定制化后台、SaaS系统；
  • React/Vue组件化项目；
  • UI设计稿独一无二，不能套现成模板。

❌不太适合：

  • 只想快速搭页面，不想自己拼任何组件（选Bootstrap更省事）；
  • 完全没有组件封装的老旧多页面模板，到处复制长串class。

写在最后

Tailwind不是要完全抛弃CSS，而是改变组织样式的思路。
很多新手吐槽HTML类名太长，但结合组件封装之后，就可以规避大量重复。做定制UI的现代前端项目，Tailwind已经非常主流。

学习建议：先玩CDN Demo感受工具类；正式项目搭配shadcn/ui，不要从零手写全部组件。

标签：

0 条笔记