1. 什么是Tailwind CSS
Tailwind CSS就是一个使用公用程序类的CSS框架，这个公用类仅仅只是一个CSS样式类，其中包含着各种各样的CSS样式供开发者开箱即用而不需要再编写复杂繁多的CSS，这些CSS样式大多是安全的能让页面看上去更美观。同时它也支持自由扩展，可以在原有的基础类中针对自己的需求进行个性化定制。具体的介绍请自行前往Tailwind CSS官网
2. 为什么要使用Tailwind CSS
- 开箱即用，无需离开HTML即可编写CSS样式，直接使用即可
- 上手容易，学习成本低
- 功能丰富，便于开发者开发
- CSS库成熟，其中包含各种各样已经封装好的CSS样式
- 性能优秀，生产坏境下体积非常小
- 可定制化，在原有CSS库基础上可以进行扩展定制个性化CSS
对于开发过程中使用的各种插件、工具我总是会去思考，是否值得使用、是否好用、学习与开发的成本与得到的回报是否匹配、是否稳定以及遇到bug该如何解决。对于React中create-react-app脚手架工具创建的项目自身带有module.css供开发者编写样式，并且可以自己配置项目使项目支持less、sass等。所以对于TailwindCSS到底要不要去使用需要结合自身情况考虑。
3. TailwindCSS开发配置
注：TailwindCSS不能直接安装在项目中，这里使用的是postCSS进行配合使用
create-react-app安装TailwindCSS官方教程
3.1 使用create-react-app（CRA）创建项目
创建TS项目
yarn create react-app project-name --template typescript
创建JS项目
yarn create react-app project-name
3.2 CRA安装Tailwind CSS依赖
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
注：Create React App尚未支持PostCSS 8，所以您需要安装[Tailwind CSS v2.0 PostCSS 7 兼容性版本]
3.3 CRA安装react-app-rewired 和 customize-cra
yarn add react-app-rewired customize-cra
3.4 修改 package.json配置
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"，
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ "eject": "react-app-rewired eject"
},
3.5 在项目根目录新建config-overrides.js文件
// config-overrides.js文件内容：
const { override, addPostcssPlugins } = require('customize-cra')
module.exports = override(
addPostcssPlugins([
require('tailwindcss'),
require('autoprefixer')
])
)
3.6 新建并配置tailwind.config.js
创建一个最小化的 tailwind.config.js 文件：
npx tailwindcss-cli@latest init
// tailwind.config.js
module.exports = {
//配置 `purge` 选项指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
// purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
若想创建完整配置项tailwind.config.js 文件：
npx tailwindcss init --full
tailwind.config.js可以改变TailwindCSS的基础配置，以做到让开发者的定制化开发，例如在配置中增加某些类以便可以在全局中使用
// 官方示例
// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
}
}
}
3.7 在index.css文件中添加基础CSS公共类
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
并且在index.tsx文件引用即可
注：只需在顶层页面引用一次即可，其下的页面及组件都可以直接使用Tailwind CSS样式
3.8 VScode安装Tailwind CSS插件
VScode 搜索 Tailwind CSS IntelliSense 安装即可
4. Tailwind CSS的使用
4.1 直接在组件中引用（开箱即用）
例：编写一个header组件header.tsx
// header.tsx
export default function Header(){
return <div>
<div className=" relative top-4 bg-red-300">header</div>
</div>
}
这样即可不需要再***.css等样式文件中编写，直接在HTML页面中进行样式开发，也就是TailwindCSS的特点：无需离开您的HTML，即可快速建立现代网站。
效果如下：
更多现成的开箱即用的样式情前往官方文档
4.2 用Tailwind CSS编写class
新建header.css
/* header.css */
.header {
@apply relative top-4 bg-blue-300;
}
// header.tsx
import './index.css'
export default function Header(){
return <div>
<div className="header">header</div>
</div>
}
效果如下：
4.3 运用指令进行灵活扩展
@apple
复用某种样式但是又需要进行某些样式的增改。
/* header.css */
.header {
@apply relative top-4 bg-blue-400;
}
.header1 {
@apply header;
@apply mt-3; /* 在header的基础上进行扩展 增加margin-top */
@apply bg-red-300; /* 在header的基础上进行修改 将背景颜色修改 */
}
// header.tsx
import './index.css'
export default function Header(){
return <div>
<div className="header">header</div>
<div className='header1'>header1</div>
</div>
}
效果如下：
更多指令请前往Tailwind CSS官方文档
5.总结
总的来说Tailwind CSS还是值得开发者去学习去使用的，在一个团队中在一个大项目中使用Tailwind CSS，不仅能减少后期他人阅读代码的时间，同时也可以统一团队的开发CSS规范，并且TailwindCSS功能逐渐丰富，日后会对开发者越来越友好，降低开发成本。
更多有关内容请前往Tailwind CSS官方网站
