什么是tailwindcss

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计

css发展

1. 内联样式

在内联样式中只能写一些基本样式

优点
- 自由性高
缺点：
- 无法使用hover，focus这样的状态，无法使用媒体查询，
- 无法约束内联值，如宽度在某个地方100px，在另外一个地方102px
- 增加html体积
```
<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
```
  2. 原生写法
  在原生的写法中，经常是想到啥写啥，可以会存在简单的样式复用，但在多人合作开发过程中如果没有统一的规范去约束，就会出现想什么写什么，且原生写法存在每次添加新feat时css文件都会变大。
优点：
- 自由性高
缺点：
- 复用性较低
- 功能越多，css文件越大
```
<style>
.wrapper{
text-align:center;
background:red;
...
}
</style>
<div class="wrapper"> Click </div>
```
  3. css组件化
  将相同视觉的UI封装成一个组件。比如一个按钮，整个项目中，这个按钮被多次使用，并且样式一致。那么就可以封装成一个按钮类。
优点：
- 针对某一类组件（如按钮，菜单）可以快速进行使用，不需要动手写css
缺点：
- 自由性不足
```
<Button> Click </Button>
```
  4. css原子化(tailwindcss)
css原子化依旧是组件，只是每个组件都是一个单一功能的css属性
优点：
- 不需要为了给类命名而浪费精力：不必再为了一个 flex 容器的完美抽象命名而倍受折磨
- CSS 停止增长：不需要编写新的CSS，减小了css体积
- 更改会更安全：CSS 是全局性的，您永远不知道当您进行更改时会破坏掉什么。您 HTML 中的类是本地的，因此您可以更改它们而不必担心其他问题
- 自由性极高

缺点：

增大html体积

<div class="bg-blue-600 text-white p-4 text-xl"></div>

在umi中快速上手

1. 安装依赖

// 安装umi
yarn create @umijs/umi-app
// 安装tailwindcss
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2. 添加umi配置

extraPostCSSPlugins: [
require('tailwindcss'), 
],

3. 创建tailwindcss文件

在src目录下创建tailwind.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 在src/global.less中引入tailwind.css

@import './tailwind.css';

5. 初始化tailwind.config.js

npx tailwindcss init

6. 修改tailwind.config.js配置

module.exports = {
// 指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
  extend: {},
},
variants: {
  extend: {},
},
plugins: [],
// 因tailwindcss预设的基础样式,所以需要禁用掉
corePlugins: {
  preflight: false,
},
};

tailwindcss使用

1. 功能类使用

基础使用

```tsx export default function IndexPage() { return (

<div className="bg-blue-600 text-white p-4 text-xl">tailwind.css</div>
<div className="p-6 max-w-sm mx-auto bg-blue-400 rounded-xl shadow-md flex items-center space-x-4 mt-8">
  <div className="flex-shrink-0">
    <img
      className="h-12 w-12"
      src="https://img.alicdn.com/tfs/TB1zomHwxv1gK0jSZFFXXb0sXXa-200-200.png"
      alt="ChitChat Logo"
    ></img>
  </div>
  <div>
    <div className="text-xl font-medium text-white">ChitChat</div>
    <p className="text-gray-500">You have a new message!</p>
  </div>
</div>

); }

![image.png](https://cdn.nlark.com/yuque/0/2022/png/2828912/1648088472723-0b746987-9a38-4787-86ed-f563b2e70db4.png#clientId=u0b892a83-a75b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=241&id=yYui8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=241&originWidth=1549&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11658&status=done&style=none&taskId=u64ae4ece-b94e-4eb9-be9c-d9a222d834b&title=&width=1549)
<a name="Z4Nk2"></a>
### 创建抽象的 CSS 类
使用 Tailwind 的 @apply 功能创建抽象的 CSS 类
```less
@layer components {
  .title {
    @apply text-5xl bg-yellow-600 text-white;
  }
}

import styles from './index.less';
export default function IndexPage() {
  return (
    <div>
      <div className="bg-blue-600 text-white p-4 text-xl">tailwind.css</div>
      <div className={styles.title}>123</div>
    </div>
  );
}

tailwindcss