前言

最近准备学习 Tailwind CSS，之前的前端知识除了最基础的语法外，在实际的项目中，发现如何使用标准化样式是比较难的。也就是说，如何让样式标准化，这让我了解了 Tailwind CSS。

通过浅层次的封装，Tailwind CSS 可以让页面的 CSS 效果尽可能地达到统一，并且是基于原生的标签。很多框架组件的封装其实层次高了点，也就是把样式和功能都封装了，对于一些定制化需求，难以满足样式的调整。

比如提供的 Antd 的 Input 组件，它本身就封装了众多样式调整，并且还需要配合全局的样式，有时候调整单个样式会影响到其他的组件样式。在我看来，这个封装层级还是高了点。

感觉 Tailwind CSS 的层次就挺好，能够充分满足定制化需求。当然，缺点也很明显，那就是有学习曲线，它是对于样式的再定义，增加了很多 Tailwind 自己的定义。

幸好官网有详细的文档，介绍如何使用，还有代码例子，只是需要学习和记忆，但发现很有用。刚好可以补全对于常用 HTML 标签的使用，还有一些常见组件，比如卡片，列表，人物头像，输入框的样式定义，获益良多。

之后会慢慢把下面这些 AI 味的介绍，替换成一些学习笔记，比如怎么使用常用类。

Tailwind CSS 简介

Tailwind CSS 是一个功能类优先的 CSS 框架，它不像 Bootstrap 或 Material UI 等传统框架那样提供预设的组件，而是提供了大量的工具类（utility classes），让开发者能够快速构建自定义设计，而无需编写自定义 CSS。

核心特点

  1. 实用至上 - 提供了数百个可以直接在 HTML 中应用的工具类
  2. 响应式设计 - 内置响应式变体，轻松构建适配不同屏幕尺寸的界面
  3. 可定制性 - 通过配置文件完全控制颜色、断点、字体等
  4. 按需生成 - 只包含你使用的类，保持最小的文件体积

安装与配置

安装 Tailwind CSS

1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置文件

1
2
3
4
5
6
7
8
// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 CSS 中引入 Tailwind

1
2
3
4
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

基础用法

排版

1
2
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind</h1>
<p class="text-gray-700 mt-2">这是一段使用 Tailwind CSS 样式的文本</p>

布局

1
2
3
4
5
<div class="container mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- 内容 -->
  </div>
</div>

学习路线图

  1. 基础工具类 - 排版、颜色、间距、尺寸等
  2. Flex 和 Grid 布局 - 掌握现代布局技术
  3. 响应式设计 - 使用断点前缀创建响应式界面
  4. 组件提取 - 使用 @apply 创建可复用组件
  5. 深入定制 - 主题配置、插件开发等

实战案例

后续将添加实际项目中使用 Tailwind CSS 的案例和最佳实践

常见问题与解决方案

学习过程中遇到的问题和解决方法将在这里更新

资源推荐

总结

Tailwind CSS 改变了我们编写 CSS 的方式，通过其实用优先的方法，可以显著提高开发效率。这个学习笔记将持续更新，记录我在学习和使用 Tailwind CSS 过程中的心得体会和技巧。