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

Question

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

                <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 更改为 green/bold，即使用 tailwind css 应用 text-green-500 和 font-bold。

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

的内容

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

我怎样才能应用额外的顺风 css 属性只特定的词？

Answer 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
}

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

How to individually change text color and font weight in the same div element using Tailwind CSS and React

css

typescript

reactjs

tailwind-css