初月_Yuechu

两种写法，两种职责#

Tailwind 擅长的是页面级、组合式的样式：间距、布局、对齐、响应式断点。这类样式变化频繁，写在模板里最直观。

Stylus 擅长的是组件内部、结构化的样式：伪元素、嵌套选择器、复杂的状态组合、动画关键帧。这类样式需要和组件结构绑定，放在独立的样式块里更好维护。

工具没有优劣，边界不清才是问题。

断点必须有单一来源#

最容易出错的地方，是同一套断点在两个工具里各写一遍。项目通过一个共享的 breakpoints.styl 把数值集中起来：

1
bp-sm = 640px
2
bp-md = 768px
3
bp-lg = 1024px
4
bp-xl = 1280px

组件内部使用 Stylus 变量，页面布局使用 Tailwind 的响应式前缀。数值只维护一次，改的时候不会漏掉另一半。

一个具体例子#

下面这段样式负责筛选器里的清除按钮。它需要绝对定位、圆形点击区域、悬停背景和图标尺寸，这些都属于组件内部细节，所以放在 Stylus 里：

1
&__search-clear
2
  position absolute
3
  right 0.5rem
4
  top 50%
5
  transform translateY(-50%)
6
  display inline-flex
7
  border-radius var(--shape-corner-full)
8

9
  &:hover
10
    background var(--surface-container-high)

而它在模板里的位置和外部间距，则继续交给 Tailwind：

1
<div class="relative w-full max-w-lg">
2
  <input class="w-full" />
3
</div>

!important 要有主人#

样式冲突时，最省事的做法是加 !important，但这也是最容易失控的做法。项目对它有明确约束：只在确实需要覆盖第三方或运行时样式的边界使用，并且要写清原因。

我的经验是：先找层级问题，再考虑 !important。大多数「改不动」的样式，其实是选择器优先级或者加载顺序的问题，而不是真的需要强制覆盖。

现在再问我为什么不统一，我的答案会是：统一工具很轻松，统一职责才难。后者做到了，前者反而没那么重要。