关于css:2023-告别-CSS-预处理工具彻底拥抱-TailwindCSS

CSS 是申明式语言，很简略，很好学，然而写起来很累，所有货色都要写进去能力失效。复用方面更是无从下手，尽管大家都在一直总结，但始终没能找到足够好用的计划，能够无效改善 CSS 开发。

于是咱们只好把眼帘转出 CSS 之外，转投 CSS 预处理工具，Less、SASS（SCSS）、Stylus，引入种种 CSS 不具备的性能，帮忙咱们改良开发体验。比方嵌套、函数、循环、条件，等等。然而如果你仔细察看，实际上，这几个工具最近 5、6 年都没怎么更新（我说的是功能性），因为该有的都有了，甚至很稳固；其它来自于 CSS 的改良，简直跟它们没什么关系，也不必更新。

最近几年，随着 CSS 倒退，一些新个性逐渐引入，我感觉这些工具越来越难用，它们能带来的益处曾经无奈覆盖它们所造成的问题。是时候辞别 CSS 预处理工具了，就像咱们当年辞别 jQuery 一样。

为什么说预处理工具落后？

我把理由分成三大类：

预处理工具的问题

• 对 CSS 函数兼容性不好，尤其是 rgba()、hsl() 这些罕用的色彩函数
• 数值类型转换，有不合乎预期的行为，比方 Stylus 实现 content:5

CSS 的改良

• CSS 领有越来越多的函数，能够间接进行计算，比方后面提到的色彩；还有 calc() 来实现根底数学计算
• CSS 变量十分好用，能够大大改良编程体验，配合各种 JS 框架，咱们能够更容易的把数学逻辑和显示成果绑定在一起
• CSS Houdini 能够实现很多新性能，即便不深刻应用（JS 局部），也有好用的自定义属性
• CSS 也开始从预处理工具排汇养分，比方近期的嵌套性能曾经开始被整合，将来咱们能够间接应用

预处理工具无奈跟进的问题

• 很多缩写、复合属性无奈解决，比方 background-image、box-shadow 等，都反对多属性独特失效，预处理工具善于的循环、条件、函数无奈提供帮忙。
• 预处理，顾名思义，产生在生产之前。实际上，网页在理论浏览时，会有很多因素影响到渲染后果，比方分辨率、dark mode 等。预处理工具对这些需要也没有改良。

代替计划

我目前的代替计划基于 TailwindCSS，所以天然蕴含 PostCSS、AutoPrefixer 等工具。而后用 postcss-import 实现主动导入和模块化；应用 tailwindcss/nesting 实现嵌套。

为什么选用 TailwindCSS？首先，理论开发中，不论应用什么前端框架，咱们都须要大量原子化的胶水款式，比方调整间距、扭转字号、给容器增加一些边框、圆角、暗影等。这些款式如果都手写，工作量并不小；学习不同的款式名也是累赘；以及最重要的，CSS 优先级问题。应用 TailwindCSS 就都能很好解决。

TailwindCSS 不仅蕴含一大堆原子化款式，本身也是个残缺且优良的 CSS 编译器。它蕴含 reset，提供一组全局通用的 CSS 变量；它能够从各种文件里把咱们用到的款式提取进去，构建后生成的 CSS 里只有咱们要用到款式，不会有多余的；它会剖析咱们对款式的应用，正当的调整款式程序，保障款式能正确失效。应用 TailwindCSS 能够节俭很多工夫。

它还自带若干插件，比方解决嵌套的 tailwindcss/nesting，反对内容类元素的的 @tailwindcss/typography 等。应用这些插件也能够帮咱们节俭很多工夫。

最初，TailwindCSS 的生态一直成长，咱们的抉择范畴越来越宽：HeadlessUI、DaisyUI、付费的 Tailwind UI 等。不便咱们从产品生命周期的任意阶段开始集成。

举荐我的项目配置

启动我的项目的时候，装置依赖。蕴含 PostCSS + AutoPrefixer、TailwindCSS 和 DaisyUI。前者提供 CSS 解决框架，蕴含主动导入 css 和嵌套性能；后两者提供可见的 UI。

pnpm i postcss postcss-import tailwindcss autoprefixer daisyui -D

主动初始化配置，-p 会主动生成 PostCSS 配置：

pnpm tailwindcss init -p

调整 postcss.config.js，启用 postcss-import 和 tailwindcss/nesting。目前咱们罕用的嵌套规定和 CSS 标准略有区别，不过无所谓，标准也没确定，所以这样就足够了。

// postcss.config.js
module.exports = {
  plugins: {'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},},
}

而后调整 tailwind.config.js

// tailwind.config.js
const DaisyUI = require('daisyui');
// 这个插件能够帮咱们解决文档类内容，我倡议罕用
const Typography = require('@tailwindcss/typography');

module.exports = {
  // 从以下文件查找用到的款式
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,vue}',
  ],
  theme: {
    extend: {// 裁减 TailwindCSS 没有蕴含的款式},
  },
  plugins: [
    DaisyUI,
    Typography,
  ],
  daisyui: {
    themes: [{
      // 只构建一个主题：luxury，并笼罩其中的两个属性
      luxury: {...require('daisyui/src/colors/themes')['[data-theme=luxury]' ],
        primary: '#FFA028',
        '--bc': '0 0% 87.5%',
      },
    }],
  },
}

而后，创立款式入口 main.css。其它款式能够如常写在这个文件里，不过如果要 @import 其它 CSS 文件，就要进行一些调整。具体能够看官网文档。

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

而后在入口文件援用 main.css 即可：

// main.js
import './main.css';

至此，新我的项目配置实现，能够照常开发了。

下期预报

这次我先分享了整体思路：用新的工具链代替预处理工具，保障已有的性能不缺失。那么下期分享的内容就是应用新的 CSS 个性，更好的实现开发。

如果你对新 CSS 感兴趣，对预处理工具和新工具链有趣味和疑难，欢送留言探讨。如果本文对你有启发，也请帮我点赞分享，谢谢。

本文参加了 SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。