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

user_13765994 0
Viewed 365

I want to have two text color and font-weight within the same text element like below.

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

In the above example, I want to change only green and bold to green/bold, i.e. apply text-green-500 and font-bold using tailwind css.

In my current css file, I write something like

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

How can I apply additional tailwind css properties only specific word?

tailwind-css typescript reactjs css
1 Answers

You could wrap a <span> tag around the text you want to style. A <span> tag is an inline element so it won't break the words inside of it on to a new line.

For example:

<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
}
user_20467170
Related