vue3+如何使用tailwindcss

2023-11-06 68 阅读1分钟

vue版本：3.3.4

1、安装tailwindcss、postcss、autoprefixer

yarn add tailwindcss postcss autoprefixer -D

2、初始化配置文件

npx tailwindcss init -p

3、配置文件（tailwind.config.js）

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

4、src目录创建tailwind.css

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

5、main.js/ts中引入tailwind.css

import './tailwind.css'

6、最后使用

<div class="bg-black">
  <vue-qr text="Hello world!" :size="200"></vue-qr>
</div>

效果：