安装 Tailwind CSS

1. 使用 npm 或 Yarn 安装（推荐）

这种方法最适合现代 JavaScript 项目，尤其是那些使用 PostCSS、Webpack、Vite 等构建工具的项目。

步骤：

1.初始化项目（如果你还没有初始化项目的话）：

npm init -y

2.安装 Tailwind CSS 和相关依赖：

npm install -D tailwindcss postcss autoprefixer

3.生成 Tailwind 配置文件：

npx tailwindcss init

这将创建一个 tailwind.config.js 文件，你可以在其中定制 Tailwind 的配置。 4.在项目的 CSS 文件中导入 Tailwind 的基础样式：

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

5.配置 PostCSS：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

6.使用构建工具（如 Webpack、Vite 等）来编译你的 CSS 文件。此步骤会将 Tailwind 的样式与项目的 CSS 整合在一起。

2. 使用 CDN 引入（适用于原型开发）

这种方法适合不需要复杂构建的项目，或者你想快速构建原型。

步骤：

1.在你的 HTML 文件的 <head> 部分添加以下 <link> 标签：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@^3.0/dist/tailwind.min.css" rel="stylesheet">

2.现在，你可以直接在 HTML 中使用 Tailwind 的类名来构建页面样式。

3. 与框架集成

Tailwind CSS 可以轻松集成到各种前端框架中，如 Vue.js、React、Next.js 等。

  • 在 Vue.js 项目中：使用 @vitejs/plugin-vue 或 vue-cli 配置 Tailwind，步骤与 npm 安装类似。
  • 在 React 项目中：使用 create-react-app 或 Next.js，与 Tailwind 集成同样基于 npm 安装方式。

配置 Tailwind

Tailwind 提供了高度可定制的配置文件 tailwind.config.js，你可以根据项目需求自定义样式。

1. 自定义配色

你可以通过 theme.extend 来扩展 Tailwind 默认的配色方案。例如：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
};

2.修改间距单位

Tailwind 的默认间距单位可以通过配置文件进行调整，以适应项目需求：

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
};

3. 响应式断点

你可以在 tailwind.config.js 中自定义或修改响应式断点。例如：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    },
  },
};

JIT 模式（Just-In-Time）

Tailwind 的 JIT 模式允许它在你使用类时即时生成样式，从而保持最终生成的 CSS 文件体积最小。

启用 JIT 模式：

在 tailwind.config.js 文件中启用 JIT 模式：

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

通过 purge 选项，你可以指定项目中可能使用到 Tailwind 类的文件路径，以确保未使用的样式被清理掉。

Tailwind CSS 的安装与配置可以根据项目的具体需求进行灵活调整。无论是快速原型开发还是现代框架项目，都可以轻松引入 Tailwind 并开始高效的开发工作流。

Last Updated::