TailwindCss Vue3 Vite4 安装配置

TailwindCss Vue3 Vite4 安装配置

官方文档

环境

Vue3
Vite4

步骤

1. 创建项目

如果已经有项目，不需要这个步骤

npm create vite@latest my-project -- --template vue
cd my-project

2. 安装TailwindCss

安装 tailwindcss 和同级的依赖，创建tailwind.config.js 和 postcss.config.js 文件

3. 配置模板文件路径

将模板文件路径添加到tailwind.config.js 文件里

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

4. 将 Tailwind 指令添加到css文件

官方文档中是./src/style.css，在我的项目中是./src/assets/main.css，因项目而异

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

5. 编译运行

npm run dev

6. 使用

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>