如何使用 Tailwind CSS 和 React 单独更改同一 div 元素中的文本颜色和字体粗细答案

【问题标题】：How to individually change text color and font weight in the same div element using Tailwind CSS and React如何使用 Tailwind CSS 和 React 单独更改同一 div 元素中的文本颜色和字体粗细
【发布时间】：2023-03-14 09:00:02
【问题描述】：

我想在同一个文本元素中使用两种文本颜色和字体粗细，如下所示。

                <div className={s.mainTitle}>
                    I want to keep this color white! <br />
                    But I want to only change the end word **green and bold**!
                </div>

在上面的示例中，我只想将green and bold 更改为绿色/粗体，即使用tailwind css 应用text-green-500 和font-bold。

在我当前的 css 文件中，我写了类似的东西

.mainTitle {
  @apply text-white-default
  @apply font-normal
}

如何仅对特定单词应用额外的顺风 css 属性？

【问题讨论】：

标签： css reactjs typescript tailwind-css

【解决方案1】：

您可以在要设置样式的文本周围加上<span> 标签。 <span> 标记是一个内联元素，因此它不会将其中的单词换行。

例如：

<div className={s.mainTitle}>
    I want to keep this color white! <br />
    But I want to only change the end word <span className={s.greenAndBold}>green and bold</span>!
</div>

.greenAndBold {
  @apply text-green-500
  @apply font-bold
}

【讨论】：