一、前言
最近的一个项目使用了新的框架，这个框架中使用了 Tailwind CSS。对这个 CSS 的框架不是很熟悉，所以在使用过程中会遇到一些问题。
对于这些问题记录下。
本文章主要介绍 Tailwind CSS 的安装、基本配置等。
二、安装
1、安装包
根据自己使用习惯是使用 npm 还是 yarn
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
2、引入包
Tailwind css 分了几个基本的模块，可以按需引入自己需要的基础模块。
基本的导入，使用 Tailwind 指令
@tailwind base;
@tailwind components;
@tailwind utilities;
在一些项目中使用了 postcss-import 那么导入的方式是用 import
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
在上面这些模块中，base 模块一般不会导入，因为有些基本的样式我们是用不到的，例如 button 的 outline。
3、创建 tailwind.config.js 配置文件
这个是直接使用命令创建（在项目根目录下）
npx tailwindcss init
执行完成后会生成一个配置文件，默认是空的。
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
4、用 tailwind 处理 css
项目中使用的 webpack，所以是在 webpack 中的 postcss-loader 中配置。
Vue CLI2.x 中这样配置：
module.exports = { // ... module: { rules: [ { // ... use: [ // ... { loader: ‘postcss-loader‘, options: { ident: ‘postcss‘, plugins: [ require(‘tailwindcss‘), require(‘autoprefixer‘), ], }, }, ], } ], } }
Vue CLI3.x 中这样配置：
module.exports = { // css 配置 css:{ loaderOptions:{ postcss:{ plugins:[require(‘tailwindcss‘),require(‘autoprefixer‘)] } } }, }
提示：对于其他环境下的配置可以参考官方文档：Tailwind 安装
三、关于配置
在 tailwind.config.js 配置文件中可以根据实际情况自己定义。
1.颜色配置问题
在实际项目中遇到的问题是这样的：使用 text-pink-700 这样的样式不生效。
查看配置文件是这样的：
theme: { colors: { ‘transparent‘: ‘transparent‘, ‘black‘: ‘#22292f‘, ‘white‘: ‘#ffffff‘, ‘grey‘: ‘#9897a9‘, ‘grey-light‘: ‘#dae1e7‘, ‘red‘: ‘#EB5757‘ } }
颜色自定义了几种颜色，没有 pink-700 对应的颜色，所以不生效。
正常来说一个项目中用到的颜色不会很多，使用什么颜色配置就好。
上面的配置中添加：‘pink-700‘:‘#b83280‘ 后就可以正常使用。
colors: { ‘transparent‘: ‘transparent‘, ‘black‘: ‘#22292f‘, ‘white‘: ‘#ffffff‘, ‘grey‘: ‘#9897a9‘, ‘grey-light‘: ‘#dae1e7‘, ‘red‘: ‘#EB5757‘, ‘pink-700‘:‘#b83280‘ },