vue项目中引用tailwindcss与heroicons

> 问题：已有vue2项目中使用TailWind Css

> 处理步骤：

1、安装tailwindcss以及关联组件

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2、创建配置文件（空的or包含有所有默认配置的文件）

## 创建一个空的tainwind css配置文件
npx tailwindcss init

## or

## 创建一个包含有所有默认配置的文件
npx tailwindcss init --full

3、在项目根目录下创建postcss.config.js文件，内容如下：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

4、在main.js中引入tainwind css

import "tailwindcss/tailwind.css"

完毕！ 做完上面这些步骤，到项目中就可以使用了（如下）。。撒花花

<div class="text-center">
     <div class="text-red-500">
     	内容测试
     </div>
</div>

> 注意事项及小贴士：

• 问题1： 当你添加好tailwind css组件后，你会发现页面的样式有可能发生了一些变化，这是因为tailwind css 给我们的项目添加了一些默认样式 ，咱们项目中的某些类名和tailwind css 一样引起的。

解决：
方式一：把项目中的类名修改；
方式二：禁用tailwind css 相关的类名（方法见下问题）；
方式三：添加前缀 prefix: ‘tw-’, // 给所有类都加上前缀

• 问题2： 如何禁用某些类名？

解决：在tailwind.config.js文件中添加corePlugins，具体代码如下

module.exports = {
	------
	corePlugins: {
	   container: false, // 不在项目中使用 container 类; 禁用
    },
}

• 问题3：别名色板设置。

解决：在tailwind.config.js文件中添加colors，具体代码如下

module.exports = {
	------
	theme: {
    extend: {
      colors: {
        yyf_red: { // 色值分类名称可以与框架中一致，一致时会覆盖；也可以不一致相当于新建
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}

• 问题4： vue3项目中使用，区别点？

解决：主要做区别是版本不同，具体步骤到官网地址：https://www.tailwindcss.cn/docs/guides/vue-3-vite

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

---

---

---

> 拓展

heroicons使用方法：
步骤1: 安装：npm install @heroicons/vue
步骤2: 页面直接使用 如下

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/> // 这里面用的样式名实际就是tailwindcss中的名称
    <p>...</p>
  </div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
  components: { BeakerIcon }
}
</script>

注：

• 24x24 轮廓图标可以从@heroicons/vue/outline 导入，20x20 实心图标可以从@heroicons/vue/solid 导入。
• 图标使用大写驼峰式命名约定，并始终以单词 Icon 为后缀。
  地址https://github.com/tailwindlabs/heroicons#vue