vue3 tailwindcss的使用

首先安装依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latestnpm i -D unocss

然后vite.config.ts中 引入

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

终端执行：

npx tailwindcss init -p

会在项目根目录下面生成两个文件

 tailwind.config.js

module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

postcss.config.js

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

完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。

VScode 安装插件 Tailwind CSS IntelliSense 会有代码提示