vue3 tailwindcss的使用

首先安装依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm 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 会有代码提示