Adding base styles in Tailwind

“Base” styles are also known as the “global” styles. These styles are applied at the start of the style sheet that applies the default styling on the basic HTML elements like “heading”, “links”, “paragraphs” etc. “Tailwind CSS” is a well-reputed versatile CSS framework that comes with a wide range of base styles. It offers a useful set of base styles known as “Preflight” that acts as a CSS plus thin layer with more opinionated styles. Moreover, they can be added dynamically by defining them in the “base” layer.

This post illustrates all the possible aspects to add “base styles” in Tailwind CSS.

How to Add “base” Styles in Tailwind?

“Tailwind CSS” comes with the following three methods to add the “base” styles in the whole HTML content or in a specific element:

Use “CSS” to Add base styles in Tailwind.
Use “Plugin” to Add base styles in Tailwind.

Let’s explore them one by one.

Prerequisites
Before moving on to the practical implementation, first, have a look at the newly created project named “Linuxhint” that is used for adding the “base styles”:

Project File Structure

Now, navigate to the “index.html” file and have a look at its HTML code:

<html>
<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body >
<h2 class="underline text-center font-bold text-pink-600">Welcome to Linuxhint!</h2><br>
<h3 class="text-center font-bold text–orange-600">Tutorial: Adding base styles in Tailwind.</h3><br>
</body>

In the above code lines:

The “head” section uses the “<link>” tag to link the created/compiled CSS file “/dist/output.css” with the existing HTML file “index.html”.

The “body” section defines the “<h2>” and “<h3>” elements that use the following Tailwind classes i.e., “Text Decoration” to underline the text, “Text Align” to set the content in “center”, “Font Weight” to bold, and “Text Color” to apply specified color, respectively.

Output
The output of the above code is shown here:

Now, use the discussed method to customize the above HTML code by adding the base styles. Let’s start with the Tailwind “CSS” method.

Method 1: Use CSS to Add “base styles” in Tailwind

The simplest and easiest method to add base style to the specific HTML element is to add them in the main CSS file of the project. Let’s perform this task practically by following the given steps.

Step 1: Open the CSS File
First, open the main CSS file i.e., “style.css” that contains the built-in tailwind “base”, “components”, and the “utilities” layers:

Step 2: Add the CSS
Next, add the “base” style for the specific “<h2>” and “<h3>” HTML elements by applying the classes using the “@apply” directive in the “base” layer with the help of the “@layer” keyword. The “@layer” keywords add the defined classes on the specified “base” layer:

@layer base {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}

In the above code lines, the “Font Size” class is applied to the “<h2>” and the “<h3>” elements to enlarge them up to the specified size, respectively:

Save (Ctrl + S) the file.

Step 3: Output
Now, run the code in the live server and see the output, as follows:

Here, the output shows that the Tailwind “Font Size” class is successfully applied to the specified element in the base layer.

Note: The same approach is used for all the other Tailwind CSS classes.

Method 2: Use the Plugin to Add “base styles” in Tailwind

Another useful method to add “base” styles is to write a “plugin” and use the “addBase()” function. This function helps to register new classes in the “base” layer directive. This function is used in the Tailwind “tailwind.config.js” file. Let’s do it practically.

Step 1: Define the “addBase()” Function
First, navigate to the “tailwind.config.js” configuration file and add the base styles from the plugin and call the “addBase()” function:

Save the file.

Step 2: Output
Lastly, run the given HTML code and see the output:

As seen, the Tailwind “Font Size” class defined in the “addBase()” function as a JavaScript object is applied to the specified HTML elements.

Conclusion

Tailwind Base Styles can be added easily using the “CSS” classes in the main CSS file and the “Plugin” with the “addBase()” function in the configuration file. The “CSS” method is considered the simplest method as it only defines the base styles in the “base” layer and automatically implements them on the specified element. On the other hand, the “plugin” section of the “tailwind.config.js” file requires the “addBase()” function to define the base styles as JavaScript objects. This post illustrated all the possible aspects to add base styles in Tailwind CSS.