How to use CSS clases with Tailwind CSS?

Question

I am building a site with Next.js and Tailwind and wanted to know if there is any way you can use Tailwind CSS classes along with Next.js classes. For example:

<img src={user.picture} className="rounded"{styles.pfp}></img>

or perhaps something like

<img src={user.picture} className=`rounded{styles.pfp}`></img>

Is there any way to do that? Do let me know if there is.

Ed Lucas · Accepted Answer · 2023-01-14 20:28:19Z

2

Yes, the way to do it would be like this:

<img src={user.picture} className={`rounded ${styles.pfp}`}></img>

with rounded being the Tailwind class and styles.pfp being your class.

edited Jan 14, 2023 at 20:28

Ed Lucas

7,4544 gold badges40 silver badges52 bronze badges

answered Jan 14, 2023 at 16:14

bits-and-bytes

365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChenBr Over a year ago

Unless the styles.pfp variables are defined before tailwind builds its classes, it won't work. For that kind of scenario, safelisting should be used.

Collectives™ on Stack Overflow

How to use CSS clases with Tailwind CSS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related