Tailwind 使用

Tailwind Css ^3.0

1. 安装 Tailwind CSS

进入项目目录并安装 Tailwind CSS：

cd my-project
npm install -D tailwindcss postcss autoprefixer

2. 初始化 Tailwind CSS 配置

运行以下命令来初始化 Tailwind CSS 配置文件：

npx tailwindcss init

这将在项目根目录下生成一个 tailwind.config.js 文件。 也可以手动创建一个tailwind.config.js 文件。

4. 配置 Tailwind CSS

编辑 tailwind.config.js 文件，配置 Tailwind CSS 的路径和选项：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. 创建 PostCSS 配置文件

在项目根目录下创建一个 postcss.config.js 文件，并添加以下内容：

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

6. 配置 Vue 项目

在 Vue 项目的 src/assets 文件夹中创建一个 CSS 文件（例如 main.css），并添加以下内容：

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

然后在 src/main.js 文件中引入这个 CSS 文件：

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";

createApp(App).mount("#app");

7. 使用 Tailwind CSS

现在你可以在 Vue 组件中使用 Tailwind CSS 的类名了。例如：

<template>
  <div class="bg-blue-500 text-white p-4 rounded">
    Hello, Tailwind CSS!
  </div>
</template>

8. 验证安装

运行以下命令启动开发服务器：

npm run serve

打开浏览器访问项目，你应该可以看到 Tailwind CSS 的样式生效。

9. 构建生产环境

在开发完成后，运行以下命令构建生产环境版本：

npm run build

Tailwind Css ^4.0

1. 安装 Tailwind CSS

进入项目目录并安装 Tailwind CSS：

cd your-project
npm install tailwindcss @tailwindcss/vite

2. vite.config.js 配置

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. 配置 vue 项目中的css

在你的CSS文件中添加一个@import来导入Tailwind CSS。

@import "tailwindcss";