Tailwind CSS 初识

涅槃的小狮子
153 阅读5分钟

一、CSS常用样式体系方案汇总

名称示例核心概念优点缺点
CSS预处理器Sass、Less、Stylus变量、嵌套规则、混合器（Mixin）、继承（extend）、运算。提供强大工具和逻辑控制（条件、循环）提升CSS 开发效率，代码模块化，易维护，提供逻辑控制功能。需要编译，增加开发流程复杂性。生成CSS可能冗余，性能优势较低
CSS模块化Webpack支持自动生成唯一类名避免冲突，样式按需加载避免命名冲突，适合模块化项目，维护性强。需要构建工具支持，动态样式支持不够灵活。
Atomic CSS、utility-first csstailwind CSS提供大量小型功能类名，通过组合构建页面快速开发，无需自定义CSS规则。样式统一，社区生态强大（tailwind）学习成本高（大量类名），HTML 文件样式类名多，可读性差

二、CSS原子化

1、什么是CSS原子化

CSS 原子化是指将 CSS 的样式拆分为极小的、独立的单元，每个单元只负责一个单一的样式规则。这些样式通常以类名的形式存在，直接应用到 HTML 标签上，从而实现样式的组合和复用。常见的原子化工具或框架有Tailwind CSS，unocss，windi css。

<div class="text-center text-red-500 font-bold">Hello World</div>

比如上面代码中，text-center、text-red-500、font-bold 就是原子化类名，每个类只表示一种单一的样式。 如果不用原子化，我们声明一个样式的时候，是对一个类中声明各种样式，然后应用到html上。

.test{
    color:red;
    width:200px;
    padding:6px
}

2、优势：

  1. 复用性高 ：通过在开发前预定义的类名或者是使用tailwind库，我们可以快速编写和调整样式，使用库的话，即使是不同的项目之间，都能直接使用。
  2. 减少命名冲突 ：避免传统 CSS 中复杂的命名，也避免了某些开发者乱命名的问题，只需使用原子化类名即可。不会出现全局样式污染的问题。
  3. 减少文件体积 ：通过工具去除未使用的类名，减小最终生成的 CSS 文件体积。

3、劣势：

  1. 类名冗长，HTML 不够简洁：虽然用的方便，但是大量使用原子化类名可能会导致 HTML 代码变得冗长，可读性比较低，一长串比较难看出来。
<div class="w-1/2 p-4 m-2 bg-gray-200 text-black text-center font-bold"></div>
  1. 学习成本：我们熟悉大量的工具类名称，可能需要时间适应和记忆。
  2. 代码复用难度增加：虽然说样式的复用性高，但是如果多个地方复用相同的样式，没有单独定义一个通用类的话，后续调整可能需要修改多个地方，会导致代码的复用难度比较高。

4、总结

CSS 原子化是一种以效率优先的样式管理方式，特别适合快速开发的场景。适合短期项目或者需要快速开发的场景，比如项目样式不复杂，注重效率而非代码结构的项目，还有移动端、后台管理系统等注重 UI 快速搭建的场景,但在样式需求复杂或代码结构要求较高的项目中，可能需要搭配css的组件化，权衡利弊后决定是否采用原子化。

三、tailwindcss

1、介绍：

官网：tailwindcss.com/

Tailwind CSS 是一个高度可定制的 实用工具优先（Utility-First） 的 CSS 框架，旨在帮助开发者快速构建现代、响应式的网页界面。它与 Bootstrap 等传统框架不同，不提供预定义的组件（如按钮、卡片），而是通过组合细粒度的工具类（Utility Classes）实现样式设计。

2、核心特点：

a、实用工具类（utility Classes）

直接通过类名控制样式，例如：

  • p-4 → 内边距（padding）1rem
  • text-blue-500 → 文字颜色为蓝色（500 色阶）
  • hover:bg-gray-100 → 鼠标悬停时背景变灰
  • md:text-center → 中屏（≥768px）以上文字居中

b、响应式设计

内置断点前缀（如 sm: 、md: 、lg: ），轻松实现响应式布局：

<div class="text-sm md:text-lg lg:text-xl">自适应文字大小</div>

c、高度可定制

通过 tailwind.config.js 自定义主题色、间距、字体等，支持扩展或覆盖默认配置。

d、Just-In-Time（JIT）模式

Tailwind v3+ 的 JIT 编译器按需生成样式，大幅减少 CSS 文件体积，并支持动态类名（如 w-[200px] ）。

e、开发者友好

  • 与主流前端工具（如 Webpack、PostCSS）无缝集成。
  • 提供 VS Code 智能提示插件，提升编码效率。

3、优势：

  • 灵活性：摆脱预定义组件限制，自由组合样式。
  • 一致性：基于设计系统（如间距、颜色层级）规范样式。
  • 维护性：直接在 HTML 中修改样式，减少 CSS 文件跳转。
  • 性能优化：结合 PurgeCSS（生产环境自动移除未使用的 CSS）。
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
  点击按钮
</button>

• px-4 / py-2 → 水平/垂直内边距
• bg-blue-500 → 背景色
• rounded-lg → 大圆角
• hover:bg-blue-600 → 悬停背景色
• transition-colors → 颜色过渡动画

4、劣势：

  • 学习成本高

  • class类名冗长

  • 需要处理与第三方库结合使用引发的冲突问题

avatar
文章
阅读
粉丝