vue中如何引入并使用Tailwind css

Tailwind css官网

1、新建vue项目

2、在项目中安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

3、等待安装完成后，输入命令初始化tailwind和postcss配置文件

px tailwindcss init -p

4、在vue项目中，在src目录下新建一个css文件(index.css)，在文件中写入

@tailwind base;

@tailwind components;

@tailwind utilities;

5、在main.js中引入index.css文件

import './index.css'

6、在vue项目中，找到刚刚配置新建的tailwind.config.js，更改配置Purge，写入如下代码：

module.exports = {
  purge: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'  //包含了src文件夹下所有的vue,js等等文件
  ],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

7、如下代码测试是否配置成功，如图显示文字有下划线并且加粗，即为配置成功：

<div class="font-bold underline">你好呀</div>