The use of !important in CSS is not what web designers encourage you to use. But it’s very useful in many situations like you want to override the existing style without removing them. You are adding TailwindCSS to an existing project and you want Tailwind classes to have high priority. In this guide, you’ll learn about using !important in TailwindCSS.
When to use !important modifier in TailwindCSS Project?
There are 2 common use cases where you might need !important modifier.
- You want to override an existing class without removing it.
- You are integrating Tailwind to an existing project and want tailwind classes to defeat previous class styles.
Using !important to Override Classes
In the first use case, you only need to add ! sign in your TailwindCSS classes. This will make Tailwind CSS classes to take the highest property over anything. For example, you have a p tag that uses a previous class description where you have set the font-sizes to 20px and now you don’t want to remove the styles but instead override them. Here is a simple example. The working demo can be checked on the tailwind playground.
|
1 2 3 4 5 6 7 8 9 |
<div class="h-screen w-full bg-gray-100"> <p class="my-custom-class !text-3xl"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem laborum placeat quasi libero quaerat debitis commodi repellat. Perferendis tempora illo laborum fuga, quaerat eum impedit eius alias id ratione quis. </p> </div> |
In the above example, the text-3xl will not work because the font-size is already 20px in the my-custom-class. So, with ! symbol, the class !text-3xl will use the !important modifier and override the existing style.
In the above example, a custom class is used to add some styles to paragraph. Make sure you check how to add custom styles in TailwindCSS for more information.
Using !important for All TailwindCSS Classes
Sometimes, when you integrate TailwindCSS into an existing project, you might want to use !important modifier for all the tailwind classes. For this purpose, you can specify important: true in tailwind.config.js file and all the classes generated with TailwindCSS will have !important in them. You can read more about this feature on the official docs of TailwindCSS.
Conclusion
There are situations where you may need to use !important with TailwindCSS classes. The above 2 methods are very useful for 2 common use cases where you might need !important modifier.