这是一篇主要介绍Tailwind配置以及使用方法的文章，本文总结了Tailwind类名的十大命名规律，虽然有相应的代码提示工具，但是笔者希望能进一步减轻初学者的记忆负担，同时引入了styled Components结合使用。
Part1 Styled Components
1 介绍
Styled Components 是一个常用的 CSS in JS 类库。和所有同类型的类库一样，通过 js 解决了原生 css 所不具备的能力，比如变量、循环、函数等。诸如 sass&less 等预处理可以解决部分 css 的局限性，但还是要学习新的语法，而且需要对其编译，其复杂的 webpack 配置也总是让开发者抵触，而 Styled Components 很好的解决了这些问题。
2 安装和使用
安装方法
yarn add styled-components
使用方法
import styled from 'Styled Components';
const Wrapper = styled.section`
margin: 0 auto;
width: 300px;
text-align: center;
`;
const Button = styled.button`
width: 100px;
color: white;
background: skyblue;
`;
render(
<Wrapper>
<Button>Hello World</Button>
</Wrapper>
);
上述的代码片段展示了 React 项目中使用 Styled Components，定义了 Wrapper 和 Button 两个组件，包含了 html 结构和对应的 css 样式，从而将样式和组件之间的 class 映射关系移除。
具体使用细节：segmentfault.com/a/119000001…
3 提示插件
安装vscode-Styled Components即可。
Part2 Tailwind
1 Tailwind介绍
先来看下官网的介绍：
Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。
它不同于Bootstrap等前端ui库，提供已经写好的组件。更像是之前的原子化css, 将css属性颗粒化，生成对应的功能class。相较原子css它还支持伪类、响应式，并且可高度自定义。
2 Tailwind的配置和使用
配置方法
第一步：首先生成tailwind.config.js文件
npx tailwindcss init
第二步：在tailwind.config.js配置项目的基础样式（会默认覆盖tailwind的prefight）
module.exports = {
important: true,
corePlugins: {
preflight: false, // 禁用tailwind的预设样式
},
variants: {
extend: {
backgroundColor: ['checked'],
borderColor: ['checked'],
},
},
theme: {
extend: {
// 设置font-size，第二个数据是行高，用法：text-size12,text-base
fontSize: {
base: '12px',
12: '12px',
14: '14px',
16: '16px',
18: '18px',
20: '20px',
24: '24px',
},
// 设置font-family，用法 font-normal
fontFamily: {
normal: ['Proxima Nova', 'PingFangSC', 'sans-serif'],
semibold: ['Proxima Nova Semibold', 'PingFangSC', 'sans-serif'],
bold: ['Proxima Nova Bold', 'PingFangSC', 'sans-serif'],
},
// 设置line-height，用法：leading-18
lineHeight: {
base: '21px',
18: '18px',
21: '21px',
24: '24px',
27: '27px',
30: '30px',
},
// 设置font-weight，用法：font-bold
fontWeight: {
regular: '400',
semibold: '600',
bold: '700',
},
// 设置颜色，用法：font-gray-20 / bg-brand / border-gray-border
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff', // 灰度/白色
red: '#ff6453',
// 这三个一般用于文字颜色
grey: {
default: '#242f57',
10: '#191d32', // 灰度/一级文字
20: '#474c66', // 灰度/二级文字、次级文字按钮
30: '#777d99', // 灰度/三级文字、icon
40: '#b8bbcc',
50: '#d9dbe5',
60: '#eaecf6',
70: '#f6f6fb',
80: '#fafafd',
300: '#b8bbcc',
500: '#eaecf6',
700: '#fafafd',
},
// 品牌色
brand: {
default: '#0080ff',
10: '#369afe',
20: '#67b3fe',
30: '#3088e0',
40: '#a0d0ff',
50: '#e6f3ff',
60: '#f4faff',
A100: '#369afe',
},
},
// 用于设置边距，用法：px-2 / my-3
spacing: {
default: '1px',
1: '1px',
2: '2px',
3: '3px',
4: '4px',
6: '6px',
8: '8px',
12: '12px',
14: '14px',
16: '16px',
18: '18px',
20: '20px',
24: '24px',
28: '28px',
32: '32px',
36: '36px',
40: '40px',
48: '48px',
64: '64px',
72: '72px',
74: '74px',
auto: 'auto',
},
// borderRadius，用法：rounded, rounded-md
borderRadius: {},
// borderWidth,用法：
borderWidth: {
default: '1px',
},
screens: {
default: '1280px',
},
},
},
};
第三步：在config.js中引入tailwind.config.js
const {theme,important,corePlugins} = require('../tailwind.config');
const getBaseConfig = moduleName => {
return {
source: {
...
designSystem: theme //添加配置
},
tools:{
tailwind: {
important, //其他配置类似
corePlugins,
purge: { //treeshake掉不需要的tailwindcss
enabled: isProd,
content: ['./src/**/*'], //对应每个模块下的src文件夹
//layers: ['utilities'],
},
},
styledComponents: {
pure: true,
displayName: true,
ssr: false,
transplitTemplateLiterals: true,
},
...
}
}
使用方法
在需要使用Tailwind的文件下导入tailwind.css即可，它主要有3个模块
• base:css reset，重置默认属性
• components：一些组件样式
• utilities：工具类，也就是最常用的样式封装
方法一：
//Example.jsx:
import React from 'react';
import 'tailwindcss/tailwind.css'; // 全部导入
方法二：
import React from 'react';
import 'tailwindcss/base.css'; // 导入base部分
import 'tailwindcss/components.css'; // 导入components部分
import 'tailwindcss/utilities.css'; // 导入utilities部分
在接下来就可以直接使用Tailwind的css类了，类名虽多，但是比较有规律
具体使用方法：
1. 颜色 类名= 使用目标+颜色+权重
一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，颜色green：
文字颜色： text-green
背景颜色： bg-green
边框颜色1： border-green //default，不需要数字描述
边框颜色2： border-green-700 //数字表示颜色的深浅，越大颜色越深
2. 文本 "text-"
文本颜色、文本装饰、大小写转换和溢出样式 见：docs.tailwindchina.com/docs/text-c…
3. 字体 "font-"
字体类型 "font-"+{type}
字体粗细 "font-"+{weight}
4. 行高 "leading-"+{size}
5. 背景
"bg-"
<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>
背景颜色、背景图片位置等见： docs.tailwindchina.com/docs/backgr…
6. 边框 "rounded-"或"border-"
"rounded-"设置边框的圆角样式，"border-"设置边框颜色、粗细、边框类型等
<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>
7. 边距 "p-" "m-"
内边距padding： 使用p{t|r|b|l|x|y}-{size}功能类控制元素一侧的内边距。size是tailwind.config.js中配置的spacing对象的键。
外边距margin： 使用
m{t|r|b|l|x|y}-{size},用法同padding
8. 布局
8.1 display：元素显示类型
其他样式：docs.tailwindchina.com/docs/displa…
8.2 Flex "flex-"
<div class="flex">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1 hidden">3</div>
</div>
其他对齐方式：docs.tailwindchina.com/docs/justif…
box-sizing ：控制浏览器如何计算元素的总大小的功能类。
9. 伪类 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能类
并不是所有功能类都可以放在伪类的后面，只有tailwind文档规定的才可使用，如果需要在tailwind的配置文件中配置variants选项。
//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
Hover me
</button>
//disabled
<button class="disabled:opacity-50">
Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">
10. 其他
tailwind2.0有暗黑模式和浅色模式的转换方法，另外taliwind.config.js的配置可丰富tailwindcss的使用功能。
3 提示插件
安装 Tailwind CSS IntelliSense 插件后，智能代码提示，就不用担心自己记不住tailwind的属性类了。
Tailwind 和Styled components的结合
考虑到tailwindcss不可能囊括我们项目开发中所有的样式代码。
- 比如一些魔法数值（例如元素宽固定260，等等）。
- 或者我们使用类第三方ui库，需要更改其样式。
这些用tailwindcss去设置就不那么方便了，这个时候我们就需要借助styled-component来进行样式编写来。
import 'tailwindcss/tailwind.css'；
import styled from 'styled-components';
const Wrapper = styled.div.attrs<{active: boolean}>({
className: 'bg-chartbox-dark',
})`
height: 100vh;
box-sizing: border-box;
overflow: hidden;
`;
