Tailwind CSS 比起传统CSS框架无法实现的一些功能

前言

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

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

技术栈

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

问题

1. 复合选择器

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

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

css 复制代码

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

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

css 复制代码

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

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

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

js 复制代码

import styled from 'styled-components';

const Styled = styled.span`
  user-select: none;

  &.is-focus {
    .render {
      margin-bottom: 12px;

      & > * {
        margin-bottom: 0;
        outline: 2px solid #635bff;
      }
    }
  }
`;

const MyComp = (props) => {
    const { isSelected, children } = props;

    return (
        <Styled className={isSelected ? 'is-focus' : null}>
          <div className="render">{children}</div>
        </Styled>
    )
}

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

2. 运行时框架

这个问题，不能说是Tailwind CSS框架的问题，应该是所有编译时框架的问题，有了解过两者区别的，应该知道编译时框架无法在应用运行时，动态注入，而是编译时生成静态文件，基于运行时动态注入这一特性，虽然会有损耗，但相应也带来更多的解决方式。

而我们的项目模版中，使用到了 lexical 这个库，而这个库初始化时，需要初始化元素的类名

js 复制代码

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import styled from 'styled-components';

const prefixCls = (key) => `rich-editor__${key}`;

const theme = {
  heading: {
    h1: prefixCls`heading-h1`,
    h2: prefixCls`heading-h2`,
    h3: prefixCls`heading-h3`,
  },
  paragraph: prefixCls`paragraph`,
  image: prefixCls`image`,
  video: prefixCls`video`,
}

const RichRender = styled.div`
  .${theme.heading.h1} {
    font-size: 24px;
    font-weight: 500;
  }
  .${theme.heading.h2} {
    font-size: 20px;
    font-weight: 500;
  }
  .${theme.heading.h3} {
    font-size: 18px;
  }
  .${theme.paragraph} {
    position: relative;
    margin: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: #667085;

    &:last-child {
      margin-bottom: 0;
    }
  }
  .${theme.image} {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: default;
    border-radius: 8px;
  }
  .${theme.video} {
    position: relative;
    max-width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
    font-size: 0;
    background: #000;
    border-radius: 8px;

    video {
      width: 100%;
      height: 56.25%;
    }
  }
`

const RichEditer = () => {
    const initialConfig = {
        namespace: 'RichEditer',
        editorState: '',
        nodes: [],
        theme,
    };
  
    return (
        <LexicalComposer initialConfig={initialConfig}>
            // 更多
        </LexicalComposer>
    );
}

如代码所示，这个是一个富文本编辑器的组件，RichEditer是编辑器，组件初始化时通过注入theme的方式来自定义化各类元素渲染器的样式及类名，而其他页面展示区域只需要使用RichRender，通过后代选择器的方式，渲染编辑器输入的html就可以实现和编辑器一致的显示。这里很明显，如果你需要修改某一元素渲染器的类名，甚至修改prefix，只需要修改theme 即可，无须修改其他地方，这里动态注入的好处无疑是降低维护成本，而这是编译时框架没法实现的，也是我们在迁移Tailwind CSS是没法解决的问题。