tailwindcss插件使用

先上网址：官网
该网站就是让css变得简单起来，只需在html上写class名称就可以。
步骤如下
1、可以根据官网提示下载插件

npm install -D tailwindcss postcss autoprefixer  // 再安装需要的依赖
npx tailwindcss init -p // 这一行代码就是初始化两个文件

2、项目中会生成tailwind.config.js文件，可以在文件中配置模版文件路径。

module.exports = {
  // 这里配置的是src文件夹下面所有的html被匹配到
  purge:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3、在你的入口文件中加入代码，main.js中引入。
你也可以选择新建一个css文件，main.js中引入即可。

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

4、组件内使用。

 <div class="flex justify-start item-center mb-2">
      <p class="flex-1">供应商: {{ detailInfo.supplier_name }}</p>
    </div>
    //只需要在元素中写入class名称即可

以上即所有步骤。