玩转CSS-TailwindCSS小知识 PostCSS PostCSS 提供了一个庞大的插件生态系统来执行不同的功能，

CSS小知识

PostCSS

PostCSS 提供了一个庞大的插件生态系统来执行不同的功能，如 linting、缩小、嵌套、插入供应商前缀和许多其他事情。

它既不是后处理器也不是预处理器, 你可以将 PostCSS 与现有的预处理器（如 Sass、Less 和 Stylus）结合使用，不过通过PostCSS插件，基本上可以覆盖CSS 预处理器的功能，同时实现多得多的预处理器实现不了的功能。

常见的PostCSS插件:

Autoprefixer: 用于自动将供应商前缀添加到需要它们的 CSS 属性中
postcss-import: 允许我们用@import语法将 CSS 文件导入其他文件
postcss-preset-env: 将现代 CSS（如嵌套和自定义媒体查询）转换为浏览器可以理解的CSS
stylelint: CSS格式检查
cssnanno: 代码压缩
postcss-nested: 为CSS提供编写嵌套的样式语法支持
postcss-modules-values: 在css中定义变量

工作流程：通过PostCSS将CSS转换成AST(抽象语法树)，对应的是JavaScript对象；然后通过插件遍历AST，进行增加，删除，修改；最后再生成CSS文件，这就是整个流程，跟babel的架构非常相似

预处理器三剑客(Sass/less/Stylus)

Sass 和 SCSS的区别:

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

CSS Modules

CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack(cs-loader插件)，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）. 默认情况下，React 脚手架搭建出来的项目，只有 .module.xxx 支持模块化

CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。(不会有人像我之前一样，傻傻的另外建一个.css文件去声明全局的class用于替换antd的组件样式吧)

CSS样式隔离

应用内部隔离推荐CSS Modules
父子应用之间隔离推荐通过打包工具添加特异性前缀/后缀

痛点:

起名太痛苦了
那几个常见的样式老是重复写, 很烦
一个类名可能就1-2条样式, 但是光看类名不清楚里面写了啥样式.
要修改的时候需要经常在jsx/tsx和样式文件中来回切换

为了解决这些的提到的痛点, Tailwind闪亮登场~

Tailwind

tailwind是什么?

可以说是一个CSS框架, 也可以说是一个PostCSS插件. 主要功能是提供了一揽子 原 子化class, 通过组合这些class, 我们就无需额外编写css就能得到想要的样式效果

为什么要用Tailwind

文档友好, 上手成本低
在项目中引入简单
可以解决上述提到的痛点, 提升开发效率

Tailwind的作用

减少为了给类命名而浪费精力
CSS 停止增长。使用传统方法，每次添加新功能时 CSS 文件都会变大。使用功能类，所有内容都是可重用的，因此您几乎不需要编写新的CSS。
更改会更安全。 CSS 是全局性的，您永远不知道当您进行更改时会破坏掉什么。您 HTML 中的类是本地的，因此您可以更改它们而不必担心其他问题。(勉强算吧, 感觉微乎其微)
提供一致的、跨浏览器的 HTML 元素默认样式(preflight)，避免不用浏览器样式表现不一致。(可能会影响UI组件, 暂时pass)

进阶

支持深色模式

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

自己额外定制css类

略

可能有的疑问

Q1: 引入这个会不会大大增加包的体积?

A: 不会. 因为未使用的样式可以通过tree-shaking清楚. 配置如下即可

module.exports = {
  content: [],
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Q2: 会不会导致class过多过长

负责的样式可以按往常一样在css文件中自定义, 想用就用, 不想用就不用.
可以二次组合封装功能类

Q3: 原子类的名称记不住怎么办

和VS Code插件"IntelliSense for VS Code"搭配食用更加(有提示, 能自动补全)
原子类的类名和样式效果是相关的, 很好记, 多用几次就知道了. 一开始不熟的话翻文档能很快找到

实践中发现的问题

嗯? antd的Button组件样式怎么变了

答: 原因: 被Tailwind里面定义的preflight样式影响到了(Preflight 是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并使您的工作更轻松地符合设计系统的约束). www.tailwindcss.cn/docs/prefli…

解决方案: 1. 禁用preflight(最简单快捷的方法) 2. 自定义全局样式修正

思考: 不同浏览器的默认样式不完全一样, 导致同一份代码在不同浏览器上的表现可能不一致. 但是如果引入全局样式文件, 统一这些样式吧(如reset.css/normalize.css/@tailwind base), 又可能影响到某些UI组件库的样式/子应用的样式.

www.tailwindcss.cn/docs(这里有你想要知道的一切, 去寻找答案吧, 骚年!)

最佳实践

企业项目中推荐css module + Tailwind搭配使用. 这样会比较舒服, 样式多的用css module, 只有个别样式的用Tailwind定义的class就行了

如果引入Tailwind需要怎么做呢? 按以下步骤操作即可(适用于React脚手架生成的项目)

1、项目中引入npm包: npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2、新增文件tailwind.config.js, 内容如下

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

3、新增文件postcss.config.js, 内容如下:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

postcss.config.js 展开源码
4、根目录引入的css/less文件顶部中加入以下两句:

@tailwind components;
@tailwind utilities;

好了, 就是这么简单, 现在就可以用上tailwind了~

学习成本: 接近于0, 想要什么样式瞄一眼文档, 用多几次就不用查了

玩转CSS-Tailwind