ReactJS: Tailwind override global CSS inline

Question

I have this rails reactjs app that if I put this line in the form

<input type='submit'/>

It will create for me a blue button. I have just installed Tailwind and if I input this line with tailwind class, it does not have any effect on the button design.

<input type='submit'
              className='bg-red-500  text-white font-bold py-2 px-4 rounded-full'/>

Is there a way that I can override this global settings like putting !important inline in the className?

Any help would be greatly appreciated.

Tarun Kolla · Accepted Answer · 2022-03-24 02:50:24Z

6

You can add a ! character before the class name and that should do the job

Example:

<input type='submit'
             className='!bg-red-500  text-white font-bold py-2 px-4 rounded-full'/>

Docs: https://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier

answered Mar 24, 2022 at 2:50

Tarun Kolla

1,0241 gold badge13 silver badges32 bronze badges

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

Comments

Dhaifallah · Accepted Answer · 2022-03-24 02:54:17Z

3

Yes, You can config tailwind.config.js if you add this

module.exports = {
  important: true,
}

this will generate all tailwind classes as !important

Collectives™ on Stack Overflow

ReactJS: Tailwind override global CSS inline

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related