> 问题:已有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