入门必备的 10 个 Tailwind CSS 类

Tailwind CSS 是一个功能优先的 CSS 框架，提供了大量实用类（utility classes），帮助开发者通过组合这些类快速构建自定义界面，而无需编写传统 CSS。以下是 Tailwind CSS 的主要特点：

1. 实用类优先

Tailwind 提供了丰富的实用类，如 text-center、bg-blue-500、p-4 等，直接应用于 HTML 元素，无需额外编写 CSS。

2. 响应式设计

内置响应式设计支持，通过前缀如 sm:、md:、lg:、xl:、2xl: 实现不同屏幕尺寸的样式调整。

3. 定制化

通过 tailwind.config.js 文件，开发者可以自定义颜色、字体、间距等设计系统，灵活适应项目需求。

4. 状态变体

支持状态变体，如 hover:、focus:、active: 等，方便定义交互状态样式。

5. 插件系统

支持插件扩展功能，如表单样式、排版等，增强框架能力。

6. PurgeCSS 集成

生产环境中自动移除未使用的 CSS，减少文件大小，提升性能。

7. 社区支持

拥有活跃的社区和丰富的资源，如插件、模板等，帮助开发者快速上手。

示例代码

<div class="bg-blue-500 text-white p-4 text-center">
  <h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1>
  <p class="mt-2">This is a simple example of using Tailwind CSS.</p>
  <button class="mt-4 bg-white text-blue-500 px-4 py-2 rounded hover:bg-blue-100">
    Click Me
  </button>
</div>

安装

通过 npm 或 yarn 安装：

npm install tailwindcss

或

yarn add tailwindcss

初始化

生成配置文件：

npx tailwindcss init

总结

Tailwind CSS 通过实用类优先的设计，简化了样式开发流程，适合快速构建现代、响应式的用户界面。

文章目录

- - 1. **实用类优先**
  - 2. **响应式设计**
  - 3. **定制化**
  - 4. **状态变体**
  - 5. **插件系统**
  - 6. **PurgeCSS 集成**
  - 7. **社区支持**
  - 示例代码
  - 安装
  - 初始化
  - 总结
- 1. flex
- 2. grid
- 3. p 和 m（内边距和外边距）
- 4. bg（背景）
- 5. text（排版）
- 6. rounded（圆角）
- 7. shadow（阴影）
- 8. h 和 w（高度和宽度）
- 9. flex-wrap 和 gap
- 10. hover（悬停状态）

标签