How to Customize Default or Base Styles in TailwindCSS

One of the reasons why developers love working with TailwindCSS is the ease of customization. Compared to other frameworks like bootstrap and material UI, you can customization anything you want in Tailwind CSS. In this guide, you will know how the base layers of TailwindCSS can be customized with custom styles.

Customizing Base Layer in TailwindCSS

First, you need to understand how all the things work in TailwindCSS. When you add 3 directives in TailwindCSS input file, they are used for different purposes. The @tailwind base is for the default styles of the elements, @tailwind utilities is responsible for all the utility classes and @tailwind components is for the components you may want to add.

To change the base styles, you need to override the existing default styles in the @tailwind base layer. Here is a general syntax of how you can customize any layer in TailwindCSS.

Customizing Default Heading Styles in TailwindCSS

In our example, we are going to change the default style of heading elements to something we want according to the project. So, we need to change the @tailwind base layer. Here is an example of how to change heading styles with custom styles in Tailwind CSS.

Now, whenever you will use your headings, it will look like the following screenshot. You can check the working demo online as well.

how to change default styles in tailwindcss

Changing Default Style of Input Elements in TailwindCSS

With the above method, you can change the default styles of any element you want. For example, if you are following a design system and you are pretty sure you will use the same input elements everywhere in your project, you can override the default style set by TailwindCSS. Here is an example of changing form element default styles.

You can check the above example on the tailwind playground. The output of the code will generate the design below.

changing form input default styles in tailwindcss


You can set the default style of any element by overriding the existing styles set by Tailwind. You need to change the tailwind @base layer if you want to set any default style of HTML elements. Please read more about changing the default styles in TailwindCSS on official documentation for more understanding.


Also, check how to add custom CSS or classes in TailwindCSS.


Latest articles

Related articles