TailwindCSS弃坑血泪史

Tailwind适合什么场景

Tailwind 适合的是新生代的公司，还没有自己的设计体系，要从零开始做一套自己的。这时候 Tailwind 的优势就出来了：你还没有自己的组件对吧？那你要用更小颗粒度的东西先搭出来通用组件吧？这个更小颗粒度的东西到底是什么呢？就是 HTML 元素和 CSS 样式了。

所以 Tailwind 比较适合项目工程较大（页面多）、有标准化设计（色卡、字体、sizing、layout）、重复率高、页面结构较简单的项目

那我为什么建议弃坑呢？

className太长

tailwindcss 的初印象给人的感受并不是很好，冗长的 class 名一看就感觉代码会很糟心。

一条属性一句代码，必然会导致某些元素 class 名会非常长冗长。

当然，你会说，有n种方法可以避免，因为深度审视这个痛点，它并不存在！

class 名提

下面有一段代码，我们写了一大堆 className

<div className='flex items-center text-gray-700 bg-white px-8 py-5 transition hover:bg-amber-100'></div>
<div className='flex items-center text-gray-700 bg-white px-8 py-5 transition hover:bg-amber-100'></div>
<div className='flex items-center text-gray-700 bg-white px-8 py-5 transition hover:bg-amber-100'></div>

我们可以在函数组件中，就近将这些 class 名提取到一个字符串变量中。

var clx = 'flex items-center text-gray-700 bg-white px-8 py-5 transition hover:bg-amber-100'

当然，我们也可以直接封装逻辑更复杂的组件

@apply聚合

在技术手段上，我们可以继续在 css 中运用 tailwindcss。通过这种方式将许多 css 样式聚合成一个 class 名。tailwind 支持一种 @apply 语法来干这个事情，代码如下

.btn {
  @apply rounded-md border border-solid border-transparent py-2 px-4 text-sm font-medium bg-gray-100
    cursor-pointer transition
}

但是这种方式和直接使用 css有啥区别？

twMerge, clsx, cva

className 的书写顺序并不能决定元素样式的优先级，它们的优先级跟 css 的声明顺序有关系，所存在大量的默认样式覆盖再覆盖的问题

tailwindcss 专门提供了一个方法来处理这个问题，这个方法就是 twMerge

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]');
// 返回结果：'hover:bg-dark-red p-3 bg-[#B91C1C]'

所以日常组件会这样子

export default function Button(props) {
  const {className, primary, danger, sm, lg, success, ...other} = props
  const base = 'rounded-xl border border-transparent font-medium cursor-pointer transition'

  // type
  const normal = 'bg-gray-100 hover:bg-gra

  // size
  const md = 'text-sm py-2 px-4'
  
  const cls = twMerge(clsx(base, normal, md, {
    // type
    ['bg-blue-500 text-white hover:bg-blue-600']: primary,
    ['bg-red-500 text-white hover:bg-red-600']: danger,
    ['bg-green-500 text-white hover:bg-green-600']: success,

    // size
    ['text-xs py-1.5 px-3']: sm,
    ['text-lg py-2 px-6']: lg,
  }))

  return (
    <button className={cls} {...other}>{props.children}</button>
  )
}

但是，这个不费脑么？《 BEM/OOCSS/SMACSS/ITCSS、CSS Modules、CSS-in-JS》哪里不爽了？

Bootstrap 画一个按钮：

<button type="button" class="btn btn-primary">Primary</button>

Tailwind：

<button class="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type="button">Add to bag</button>

一大行看起来更加恶心，如果太多又要手动定义，最后又类似css了，那还不如一开始就用css

更加验证的是，所谓的语义化

比如outline-black、outline-white、border-black……这类本身就不是啥语义化，比如暗黑模式，颜色就是反的，你样式名该不该。

主题色改变了，语义化怎么办？

但是，外包可以class= 写三四行，平时项目忙的时候，你哪有那么多时间来做CodeReview？

写起来爽，读起来累，维护痛苦

转载本站文章《TailwindCSS弃坑血泪史》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/cssBase/2024_1025_9301.html