Tailwind CSS 入门介绍

Tailwind CSS 入门介绍

1. Tailwind 是什么

Tailwind CSS 是一个基于原子化 CSS（Atomic CSS）思想的实用优先（Utility-First）CSS 框架。与传统的 CSS 框架不同，Tailwind 不提供预定义的组件（如按钮、卡片等），而是提供了一系列底层的实用工具类（Utility Classes），让开发者可以直接在 HTML 中快速构建自定义界面。

与传统 CSS 的对比

传统 CSS 方式

<!-- HTML -->
<button class="btn-primary">提交</button>

<!-- CSS -->
<style>
.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2563eb;
}
</style>

Tailwind CSS 方式

<button class="bg-blue-500 text-white py-2 px-4 rounded font-semibold hover:bg-blue-600 transition-colors">
  提交
</button>

项目中的实际示例

在项目的 src/App.js 文件中，可以看到 Tailwind 的实际使用：

div className='text-base p-1 text-[14px] hover:text-[32px] border border-black border-solid'>test</div>

2. Tailwind 官方地址

• 官方英文文档：tailwindcss.com/
• 官方中文文档：www.tailwindcss.cn/

3. Tailwind 的优势

3.1 快速开发

使用预定义的工具类可以快速构建界面，无需频繁切换 HTML 和 CSS 文件。

// 快速创建一个响应式卡片
<div class="bg-white rounded-lg shadow-md p-6 md:p-8">
  <h3 class="text-xl font-bold mb-2">卡片标题</h3>
  <p class="text-gray-600">卡片内容</p>
</div>

3.2 高度可定制

通过 tailwind.config.js 可以轻松定制主题、颜色、间距等。

项目中的 tailwind.config.js 示例：

module.exports = {
  // prefix: 'yuan-', // 可以添加自定义前缀
  content: [
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {
      padding: {
        '1' : '30px'
      },
      // 可以扩展主题配置
    },
    screens: {
      'md': '300px' // 自定义断点
    }
  },
  plugins: [
    require('./yuan.plugin') // 引入自定义插件
  ],
}

3.3 响应式设计简单

使用 sm:, md:, lg:, xl: 等前缀可以轻松实现响应式设计。

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 移动端占满宽，平板占一半，桌面占三分之一 -->
</div>

3.4 减少 CSS 文件体积

Tailwind 会自动移除未使用的样式，最终生成的 CSS 文件体积很小。

3.5 自定义插件支持

可以通过插件扩展 Tailwind 的功能。

项目中的自定义插件 yuan.plugin.js 示例：

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities }) {
    addUtilities({
        '.aaa': {
            background: 'blue',
            color: 'yellow'
        },
        '.bbb': {
            'font-size': '70px'
        }
    })
})

4. Tailwind 的缺点

4.1 学习曲线

需要记忆大量的工具类名称，初期学习成本较高。

// 类名较长，需要记忆
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">
  <!-- 内容 -->
</div>

4.2 HTML 代码冗长

过多的类名会导致 HTML 代码变得冗长，影响可读性。

项目中的示例：

div className='text-base p-1 text-[14px] hover:text-[32px] border border-black border-solid'>yuan</div>

4.3 调试困难

在浏览器开发者工具中查看元素样式时，会看到很多 Tailwind 类名，不如传统 CSS 类名直观。

4.4 过度依赖工具类

可能会导致开发者过度依赖工具类，而忽略了 CSS 的基本原理。

5. Tailwind 的功能模块及 API 介绍

5.1 核心指令

在项目的 src/App.css 中可以看到这三个核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base：引入基础样式，包括浏览器重置样式（Preflight）和一些基础元素样式
• @tailwind components：引入组件样式，用于定义可复用的组件类
• @tailwind utilities：引入核心的工具类

5.2 布局类

容器与边框

• container：创建响应式容器
• border：添加边框
• rounded：添加圆角
• shadow：添加阴影

示例：

div className='border border-black border-solid'>yuan</div>

弹性布局与网格布局

• flex：启用弹性布局
• grid：启用网格布局
• flex-col：设置弹性方向为垂直
• items-center：垂直居中对齐
• justify-between：两端对齐

示例：

<div class="flex items-center justify-between">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

5.3 间距类

• p-{size}：内边距
• m-{size}：外边距
• px-{size}：水平内边距
• py-{size}：垂直内边距

项目中可以通过配置自定义间距：

theme: {
  extend: {
    padding: {
      '1' : '30px' // 自定义 p-1 为 30px
    }
  }
}

5.4 排版类

• text-{size}：字体大小
• font-{weight}：字重
• text-{color}：文字颜色
• text-center：文字居中

项目中可以自定义字体大小：

theme: {
  extend: {
    fontSize: {
      'base': ['30px', '2rem'] // 自定义 base 字体大小
    }
  }
}

5.5 颜色类

• bg-{color}：背景颜色
• text-{color}：文字颜色
• border-{color}：边框颜色

示例：

<div class="bg-blue-500 text-white border border-red-500">
  蓝底白字红边框
</div>

5.6 响应式类

• sm:：小屏幕（默认 640px）
• md:：中等屏幕（默认 768px，项目中自定义为 300px）
• lg:：大屏幕（默认 1024px）
• xl:：超大屏幕（默认 1280px）

项目中自定义断点：

theme: {
  screens: {
    'md': '300px' // 自定义 md 断点为 300px
  }
}

### 5.7 状态类

- `hover:`：鼠标悬停状态
- `focus:`：获取焦点状态
- `active:`：激活状态

示例：
```jsx
div className='text-[14px] hover:text-[32px]'>yuan</div>

5.8 任意值（Arbitrary Values）

Tailwind v3 引入的特性，允许使用自定义值：

div className='text-[14px] w-[200px] h-[100px]'>yuan</div>

6. Tailwind 如何集成到 Vue3 和 React 中

6.1 集成到 React 项目

步骤 1：创建 React 项目

npx create-react-app tailwind-react-app
cd tailwind-react-app

步骤 2：安装 Tailwind CSS

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

步骤 3：配置 Tailwind

在 tailwind.config.js 中配置内容路径：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 4：添加 Tailwind 指令

在 src/index.css 中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 5：使用 Tailwind

在组件中使用 Tailwind 类：

import React from 'react';

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold text-center mb-4">
        Tailwind React App
      </h1>
      <button className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
        点击我
      </button>
    </div>
  );
}

export default App;

6.2 集成到 Vue3 项目

步骤 1：创建 Vue3 项目

npm create vite@latest tailwind-vue-app -- --template vue
cd tailwind-vue-app

步骤 2：安装 Tailwind CSS

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

步骤 3：配置 Tailwind

在 tailwind.config.js 中配置内容路径：

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 4：添加 Tailwind 指令

在 src/index.css 中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 5：使用 Tailwind

在组件中使用 Tailwind 类：

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold text-center mb-4">
      Tailwind Vue3 App
    </h1>
    <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
      点击我
    </button>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

总结

Tailwind CSS 是一个革命性的 CSS 框架，通过实用优先的方法改变了前端开发的方式。它提供了极高的灵活性和开发效率，但也带来了一定的学习成本和代码可读性挑战。通过本文的介绍，希望你能对 Tailwind CSS 有一个全面的了解，并能够在项目中灵活运用它来构建现代化的用户界面。