https://www.tailwindcss.cn/

文档地址

https://www.tailwindcss.cn/

在 Vue 3 项目中使用 Tailwind CSS 的步骤如下：

安装

首先，在项目根目录下打开终端/命令提示符，运行以下命令以安装 Tailwind CSS：

npm install tailwindcss

或者，如果您使用的是 Yarn：

yarn add tailwindcss

配置

运行以下命令，为您的项目设置 PostCSS 配置文件（例如 postcss.config.js 或 .postcssrc）：

npx tailwindcss init -p

默认情况下，此命令将在项目根目录创建一个名为 tailwind.config.js 的 Tailwind 配置文件和一个名为 postcss.config.js 的 PostCSS 配置文件。

编辑 postcss.config.js 文件，将 Tailwind CSS 添加到 plugins 数组中：

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

配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

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

使用

创建一个全局 CSS 文件（例如 src/assets/css/tailwind.css），并在文件顶部引入 Tailwind CSS 的基本样式、组件和实用程序：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在项目入口文件（例如 src/main.js 或 src/main.ts）中，将创建的全局 CSS 文件导入到项目中：

import '@/assets/css/tailwind.css';

使用 Tailwind CSS 类来构建您的 Vue 3 组件。
例如，在一个 Vue 3 组件中：

<template>
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold mb-4">Hello, Vue 3 with Tailwind CSS!</h1>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
  </div>
</template>

现在，您已经成功在 Vue 3 项目中引入了 Tailwind CSS。您可以使用 Tailwind CSS 的功能来构建现代化的用户界面。