安装依赖

bash 复制代码

npm install -D tailwindcss postcss autoprefixer

初始化

执行以下命令初始化

bash 复制代码

npx tailwindcss init -p

会在根目录生成这两个文件

修改tailwind.config.js

javascript 复制代码

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

编写css文件

在项目的 src/assets/styles 中新建一个 tailwind.css

css 复制代码

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

引入css

在项目的 main.js 中引入

javascript 复制代码

import "@/assets/styles/tailwind.css";

接下来就可以愉快的使用 `tailwind.css` 了！

vite搭建的vue3项目使用tailwind.css

安装依赖

初始化

执行以下命令初始化

修改tailwind.config.js

编写css文件

引入css

接下来就可以愉快的使用 tailwind.css 了！

接下来就可以愉快的使用 `tailwind.css` 了！