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: {},
    },
}

最后在main.js或者main.ts中引入css样式   import 'uno.css' 

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

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

 

定义自己的css样式：

tailwind.config.ts中写入自己的样式

 项目中css文件引入

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

组件中使用：