
yarn create vite

输入项目名称,选择Vue

选择Customize with create-vue

根据需求选一下

yarn

yarn add tailwindcss postcss autoprefixer

参考:https://tailwindcss.com/docs/guides/vite#vue
生成配置文件yarn tailwindcss init
重点来了:由于是typescript,所以需要将后缀js重命名为cjs。

编辑:tailwind.config.cjs文件,输入以下内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}再编辑src/assets/main.css替换成以下内容:
@tailwind base;
@tailwind components;
@tailwind utilities;编辑src/App.vue,添加一行内容,并保存
Hello world!
yarn dev

已生效(h1加了下划线)
