How to style React component with TailwindCSS

Question

I'm using TailwindCSS in a React Project. I'm able to style normal HTML elements by passing TailwindCSS utility classes in the className attribute but this doesn't work when I pass the utility classes inside a components className attribute like this:

<Dropdown className="hidden sm:block sm:ml-6"/>

Dropdown is a React component imported into another component.

How do I make this work?

The CSS file that Tailwind generates is already imported in the index.js of my React project. — Tobi Omotayo
– Tobi Omotayo, Commented Apr 27, 2020 at 1:11

Shamseer Ahammed · Accepted Answer · 2020-04-27 01:33:53Z

if <Dropdown/> is your custom made component you probaly forgot to include in on the div inside your component definition,

you can rename "className" to customclass and apply it inside your component definition.

so with that your code would look like

<Dropdown customclasses="hidden sm:block sm:ml-6"/>

and your component definition,

const Dropdown = ({ customclasses, ...otherProps }) => <div className={customclasses}></div>

or if you dont want to change className you can spread the ...otherProps directly on the div

const Dropdown = ({ yourprop, yourprop , ...otherProps }) => <div {...otherProps}></div>

Collectives™ on Stack Overflow

How to style React component with TailwindCSS

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related