How to style React component with TailwindCSS

0
votes

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?

1
reactjstailwind-css
Import the tailwind css in global css file - Pushkin
The CSS file that Tailwind generates is already imported in the index.js of my React project. - Oluwatobi Omotayo

1 Answers

3
votes

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>