光速入门 Tailwind CSS

Tailwind CSS 是一个用于快速 UI 开发的工具集 CSS 框架。以下是如何快速上手 Tailwind CSS 的步骤：

1. 安装 Tailwind CSS npm 包：

npm install -D tailwindcss

2. 在项目的 src 目录下创建一个新的 Tailwind CSS 配置文件 tailwind.config.js：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

3. 使用 Tailwind CSS CLI 工具生成 tailwind.css 文件：

npx tailwindcss init -p

4. 在入口文件的顶部导入生成的 tailwind.css 文件（例如 index.js 或 main.js）：

import './tailwind.css';

5. 在 tailwind.config.js 文件中配置 purge 选项，以仅包含您实际使用的样式：

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  // ...
};

6. 在 HTML 模板或者 React/Vue 组件中使用 Tailwind CSS 类：

<!-- 示例 HTML -->
<div class="text-blue-700 p-4">Hello, Tailwind!</div>

7. 最后，确保在构建流程中使用 Tailwind CSS，例如通过 webpack 或 Rollup。

以上步骤为你提供了一个快速入门 Tailwind CSS 的指南。实际操作中，你可能需要根据你的项目配置进行调整。