如何在顺风中用下一个课程覆盖以前的课程？答案

【问题标题】：How to override previous classes with next classes in tailwind?如何在顺风中用下一个课程覆盖以前的课程？
【发布时间】：2021-12-23 09:50:01
【问题描述】：

我正在使用 React + Tailwind。考虑这段代码：

// in Styles.js module
export const Button = "uppercase h-12 flex justify-center items-center bg-purple-700 ";

// in Pricing.js module
import { Button } from './Styles';

<button className={Button + " bg-green-400"}>Special offer</button>

我希望特价按钮的背景变成绿色，但它没有。

关键是，当我们在顺风中连接类时，后面的类不会覆盖前面的类。这与 CSS 的级联性质相去甚远。

如何在串联中覆盖以前的类？

【问题讨论】：

也许翻转串联？ <button className={"bg-green-400 " + Button}>Special offer</button>

标签： reactjs tailwind-css

【解决方案1】：

你必须使用模板字面量，像这样：

//const bg = "bg-green-100";

请注意，此处的模板文字必须在 {} 内，因为它是 JavaScript。

【讨论】：