前言

先允许我叠个甲。这不是一篇抨击Tailwind CSS而是我们最近团队因为Vide coding在做一些技术栈的迁移，针对我们已有的项目基础模版迁移遇到的问题所提出的疑问。

当然或许是一些高阶能力还没能掌握，以至于解决不了我们现有的一个问题。

技术栈

我们公司用的技术栈是 react + styled-components有些人很奇怪为什么不用 less 这些。后面的问题会解释到，请允许我徐徐道来。

问题

. 复合选择器

从jQuery时代过来的老人。其实对Tailwind CSS这种原子化还是比较能接受的，毕竟那个时代有 Bootstrap 这类优秀的框架，只是受到时代的局限性，复合选择器无疑拯救了无数的样式实现难题。

就像现在我们普通的间距：

.my-card {
display: flex;flex-direction: column;gap: 16px，}

我们使用弹性 gap 就能实现了但是在无弹性布局时我们更多的是使用兄弟选择器实现：

.my-card + .my-card {
margin-top: 16px;}

因为浏览器的迭代。虽然现在有更新的解决方式，但是一些场景中复合选择器依然是不错的选择。话说回来，

在我们的项目模版中。有一处实现如下：

import styled from 'styled-components';const Styled = styled.span`
user-select: none;&.is-focus {
.render {
margin-bottom: 12px;&> div {
margin-bottom:
outline: 2px solid #635bff;}
}
}
`，按理说，const MyComp = => {
const { isSelected。children } = props;return (


{children}

)
}

我们希望 MyComp` 被选中后{children}` 对应的元素有一个选中的边框效果。而针对这个场景，Tailwind CSS没有合适的方法；按理说，使用`group` 或者 ``peer`的话必须使用 ``cloneElement`才能实现。但这里我不想因为 css 框架 的弊端而复杂化 js 本身 的逻辑，这种思维本身是不对 的，本身 css 和 js 之间 的维护就应该尽可能做到不耦合。针对这样的场景似乎也只能通过创建 css 来实现，没法极致到由 Tailwind CSS 全盘控制。

. 运行时框架

This problem is not really about Tailwind CSS but about all compile‑time frameworks;those cannot inject styles at runtime because y generate static files during compilation.

The running‑time dynamic injection feature may bring overhead but also more flexibility.

The project template uses library `lexical`,which initializes element class names during its setup:

import { LexicalComposer } from '@lexical/react/LexicalComposer';怎么说呢，import styled from 'styled-components';const prefixCls = => rich-editor__${key};const me = {
heading: {
h1的观点是，prefixClsheading-h1,h2: prefixClsheading-h2,h3: prefixClsheading-h3。},paragraph : prefixClsparagraph,image : prefixClsimage,video : prefixClsvideo,};
const RichRender = styled.div
.${me.heading.h1} {
font-size:24px;font-weight:;}
.${me.heading.h2} {font-size:20px;font-weight:;怎么说呢，}
.${me.heading.h3} {font-size:18px;}
.${me.paragraph} {
position:relative;margin:，margin-bottom:12px;font-size:16px;color:#，& :last-child {margin-bottom:;}
}
.${me.image} {
display:flex;justify-content:center;margin-bottom:12px;overflow:hidden;cursor:auto，border-radius:8px;说起来，}
.${me.video} {
position:absolute;max-width:%，margin-bottom:
overflow:hidden;font-size:，background:#;按理说，border-radius:
video{width:%;height:%，}
}
;const RichEditer = => {
const initialConfig = {
namespace:'RichEditer'。editorState:'',nodes:
me
};return (
)
}

Key Takeaway: The ability to dynamically inject styles is a major advantage of runtime frameworks over compile‑time ones—a capability that Tailwind’s design does not provide out of box and which can be a stumbling block when migrating existing projects that rely on it.

在我们的项目中除了 web 和 H5，还会大量开发小程序。为了保持团队的一致性和降低心智负担，小程序也采用了类似技术栈。

html Taro + React + Linaria

当尝试将 Tailwind CSS 引入该模版时发现一个严重的问题：小程序中的类名不支持转义符号。例如

1. 在 wxss 中直接出现转义符号会报错
2. 在 wxml 中，中括号等特殊字符会被空格替换，使得诸如 h- 被拆成 h- 与 300px 两个独立类名。

为了解决这些兼容问题，我们通过插件在编译阶段将特殊符号替换为可识别形式。后静态样式得到了解决，但动态拼接类名仍无法被正确解析。因为插件仅处理字符串字面量。

鉴于升级插件带来的额外维护成本还有对代码结构的不友好，我们最终决定在小程序层面放弃使用 Tailwind CSS。

虽然 Tailwind 提供了强大的原子化工具和层级设计。但它在以下方面与传统框架相比仍显不足：

• 复合/层级选择器需要手动编写或借助 JS 工具来完成
• 运行时动态样式注入受限于编译期生成导致灵活性下降
• 跨网站兼容性特别是在小程序等受限环境下对特殊字符处理有限

因为 Video Coding 等新需求推动前端环境演进，我相信 Tailwind 将继续完善自身功能，并逐步缩小与传统框架差距。说起来，

如果你们遇到类似挑战或有更优方案。也欢迎交流讨论，