React项目结合Tailwind断点，如何指定不同自定义CSS模块类？

我在React项目中导入了外部样式表的自定义类：

import { leftBlock, rightBlock, topBlock, bottomBlock } from 'layout.module.css'

当前在HTML部分使用：

<div className={leftBlock}>

我想利用Tailwind的断点功能，在sm断点时使用bottomBlock类，但不知道如何组合。我尝试了：

<div className={leftBlock 'sm:${bottomBlock}'}

但编译器报错。请问我该怎么做？是不是思路有误？

你的思路存在关键问题：Tailwind的断点前缀（比如sm:）仅能作用于Tailwind原生类名，无法直接给自定义CSS Modules类名添加断点前缀——因为Tailwind的构建工具只会识别自身类名，不会处理自定义类的前缀。

下面是两种可行的解决方法：

方法一：在自定义样式中编写媒体查询 #

直接在layout.module.css里针对sm断点新增类或修改现有类：

/* layout.module.css */
.leftBlock {
  /* 默认样式 */
}

.bottomBlock {
  /* 其他场景样式 */
}

/* sm断点生效的样式 */
@media (min-width: 640px) {
  .smBottomBlock {
    /* 写入原本bottomBlock的样式 */
  }
}

之后在React中导入新类，用模板字符串组合：

import { leftBlock, smBottomBlock } from 'layout.module.css'

<div className={`${leftBlock} ${smBottomBlock}`}>

方法二：用Tailwind的@apply迁移自定义样式 #

如果想继续使用Tailwind的断点语法，可以在Tailwind的全局样式文件（比如tailwind.css）里，通过@apply将自定义类转为Tailwind可识别的类：

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

@layer utilities {
  .left-block {
    @apply /* 用Tailwind类替代原leftBlock的样式，或直接写原生CSS */;
  }
  .bottom-block {
    @apply /* 用Tailwind类替代原bottomBlock的样式，或直接写原生CSS */;
  }
}

之后就能直接用Tailwind的断点语法：

<div className="left-block sm:bottom-block">

这种方式需要把CSS Modules里的样式迁移到Tailwind的@layer中，让构建工具能处理这些类。

另外补充：你之前的代码还有语法错误，模板字符串需要用反引号`包裹，变量用${}，正确写法应为`${leftBlock} sm:${bottomBlock}`，但即便语法正确，Tailwind也无法识别带断点前缀的自定义类，所以还是得用上述两种方法。

内容的提问来源于stack exchange，提问作者Katharine Osborne