How to add custom styles and ways to add custom styles in Tailwind-CSS ?
Last Updated :
28 Apr, 2025
Tailwind is a popular CSS framework that makes your User Interface design making the process easier. It provides low-level classes and those classes combine to create styles for various components. Tailwind-CSS comes with a bunch of predefined styling but as a developer, we need more custom styling and the styles offered by tailwind are not enough to fulfill all requirements
To overcome from limited style issue tailwind allows us to add as many styling as we want to use in two ways:
- Inline Styling
- Config Styling
Color is the most common thing we need while building a webpage, so we will be taking color to see ways to add custom styling.
Inline Styling: Tailwind allows to use of inline styling by using square brackets (i.e. [ color code ]). With these square brackets, you can use any CSS property. With inline CSS there are some limitations. It cannot be reused again and again, you have to type the color code every time you want to use it.
Example: Below is the implementation of the inline styling:
HTML
<!DOCTYPE html>
<htm1>
<head>
<title>Tailwind custom colors</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h2 class="text-[#379237] text-4xl">Welcome To GFG</h2>
<p class="bg-[#59CIBD]">The background color used in
this paragraph is a custom color in tailwind</p>
</body>
</html>
Output:
Â
Config Styling: Config styling allows developers to use any custom color any number of times they want to use it.
If you are using Tailwind through Play CD then custom colors can be added by adding a line after the comment in the code. For adding other colors just write get the color code and assign it a name that you remember.
Example: Below is the implementation of the Config styling:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tailwind additional colors</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Add lines after this comment to add custom colors-->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
GFGtext: '#379237',
paraBG: '#59C1BD',
}
}
}
}
</script>
<!-- Add lines above this comment to add custom colors-->
</head>
<body>
<h2 class="text-GFGtext text-4xl">Welcome To GFG</h2>
<p class="bg-paraBG">
The background color used in this paragraph is
a custom color in tailwind
</p>
</body>
</html>
Output:
Â
Replacing the theme section: If you are using the production build of tailwind then while installing the tailwind production version, a file named tailwind.config.js was created. Inside that file replace the theme section with the code below or just copy the color section and paste it inside extend section:
//Javascript: Replace the theme in tailwind.config.js
// with the code below:
theme: {
extend: {
// ... just add the colors section
// including opening and closing bracket.
colors: {
GFGtext: '#379237',
paraBG: '#59C1BD'
},
},
},
Example: Below is the implementation of the above approach with replacing the theme section:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tailwind additional colors</title>
</head>
<body>
<h2 class="text-GFGtext text-4x]">Welcome To GFG</h2>
<p class="bg-paraBG">The background color used in this
paragraph is a custom color in tailwind </p>
</body>
</html>
Output:
Â
Similar Reads
How to add a style on a condition in Tailwind CSS ? In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the
3 min read
How To Add Custom Box Shadow In Tailwind CSS? Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and
3 min read
How to Customize the Font Size in Tailwind CSS ? Customizing font size in Tailwind CSS involves using the text-[size] utility class, where [size] can be predefined size identifiers like xs, sm, md, lg, xl, or numerical values. Additionally, you can extend the default font sizes in the configuration file for more customization.Syntax<p class="te
2 min read
How to Style Lists in Tailwind CSS ? Styling lists in Tailwind CSS enhances the visual appeal and usability of web pages by making lists more attractive and easier to navigate. By customizing the appearance of lists, you can improve the overall user experience on your website. These are the following approaches to Style the list in Tai
4 min read
How to Add Padding to All Sides in Tailwind CSS ? Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to eleme
3 min read
How to add new colors to tailwind-css and keep the originals ones ? You can easily add new colors to Tailwind CSS and keep the originals ones using customization configuration. You can configure your colors under the colors key in the theme section of your tailwind.config.js file. Follow the below step to add the tailwind.config.js file in your folder. Step 1: Run
2 min read
How to implement the Tailwind CSS with Custom Angular Library ? Tailwind CSS is basically a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single
3 min read
How to Add Rounded Corners to an Image in Tailwind CSS ? Adding rounded corners to an image in Tailwind CSS is an easy way to make your pictures look nicer. Instead of having sharp corners, you can give them smooth, rounded edges. Tailwind CSS has simple classes that let you choose how rounded the corners are, whether just a bit or completely round. Appro
3 min read
How to Add a @tailwind CSS Rule for CSS Checker ? Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single
4 min read
How to use hover, focus and active variants in Tailwind CSS ? In this article, we will see how to use hover, focus, and active variants in Tailwind CSS. Tailwind CSS uses the Hover, Focus, and Active variants to style an element when the user mouses move over it, focuses it, or actively clicks/tapped it. These variants allow you to create interactive and dynam
4 min read