How to Use Tailwind Config to Customize Theme Styles

Type to generate custom UI components with AI
How to Use Tailwind Config to Customize Theme Styles
David Ozokoye
Would you like to learn how to create or access the default Tailwind config file? Creating a
tailwind.config.js file lets you extend the functionality of Tailwind by adding custom utilities and
styles specific to your brand.
In this tutorial, we’ll cover the basics of Tailwind CSS and how the configuration file works. Then,
we’ll show how to generate and use the tailwind.config.js file for your web project.
Excited? Let’s get started.
What is Tailwind CSS?
Tailwind is a lightweight CSS framework that provides utility classes to easily add styles to
CSS TAILWIND 29 Sep 2023 10 min read

HTML elements on your web page.
It works similarly to Bootstrap and Material UI. However, Tailwind CSS offers more flexibility in
customizing styles and elements.
To get started with Tailwind CSS, you’ll need to install the library on your system. We use Node
package manager (npm) for the installation. So, you’ll also need Node.js installed on your
system.
Once Node is installed on your machine, open a terminal window and navigate into the directory
you wish to install Tailwind CSS. Then run the command below:
npm install -D tailwindcss
You should get a success notification once the installation is completed.
Before you can start using the utility classes tailwind provides, you’ll need to import Tailwind into
your CSS file.
Note: For a more detailed guide, we suggest reviewing the official Tailwind documentation.

Overview of Tailwind Config
Tailwind Config is the configuration file containing all the theme styles Tailwind provides. When
you add a Tailwind CSS class to your HTML template, it retrieves the required utility classes
under the hood from the tailwind.config.js file.
The config file contains the font styles, font family, sizes, and theme colors from the Tailwind
library.
Whenever you run a program that uses Tailwind CSS, it will first check the root of your project
for a config file. If you haven’t generated your configuration file, Tailwind will default to the
default configuration.
Creating Your Configuration File: How Do We
Configure Tailwind?
Once Tailwind is installed on your system, you can use the tailwindcss command line utility to
generate a configuration file for your project.
Prerequisites
Before diving into Tailwind config, you’ll need to have:
Working knowledge of HTML and CSS.
Tailwind CSS project setup.
Using the Default Filename
To generate a config file using the default file name, run the code below in a terminal window of
your project’s root directory:
npx tailwindcss init
The code above will generate a basic building block for the Tailwind config in the root directory
of your project.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},

},
plugins: [],
}
In the content section, you’ll need to add the path to your HTML templates. Essentially, the
file(s) that will be using the CSS utility classes.
For this example, we’ll set it to look for HTML and JavaScript files in the src folder. But you’ll
need to update this path to match your projects’ directory.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
}
If you’d like to scaffold the default configuration file Tailwind uses, run the command below:
npx tailwindcss init --full
This code generates the complete configuration file and prefills it with Tailwind’s generated utility
classes.
Once the file is generated, you can override the styles or add your own custom utilities to it.
Note: We strongly advise against scaffolding the default Tailwind config. This is because it
makes it difficult to keep track of the custom classes that is not tailwind’s utilities.
So, when generating the configuration file, be sure to use the blank file option.

Using a Different Filename
If you’d like to use a different filename for your Tailwind config, simply add the file name after the
init command. Here is an example code. Be sure to replace custom-config.js with the name
you’d like to use.
npx tailwindcss init custom-config.js
After generating the custom Tailwind config, you’ll need to register the file path to the config in
your input.css so Tailwind can locate the file. For this, add the code below.
// input.css
@config "./custom-config.js";
...
Ensure you replace the example file path above with your custom Tailwind configuration path.
Customizing Tailwind Config File
In this section, we’ll cover the basic usage of the Tailwind CSS configuration we generated
above.
As a rule of thumb, if you want to extend the utility classes Tailwind provides, you’ll need to add
your custom styles to the ‘extend’ block in Tailwind config. However, if you wish to override the
default CSS utility, add your custom styles to the Tailwind configuration’s theme object.
Adding or Removing Utilities
In the tailwind.config.js file, you can add and remove utility classes for your project. For
instance, you can specify the default sizes for each screen size using the ‘screens’ object. Here
is an example implementation to override the default breakpoints.
// tailwind.config.js
module.exports = {
// ...
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
2xl: '1760',
},
extend: {},
},
// ...
}

The code above will modify the default screen option Tailwind provides. You can add as many
breakpoints as you need for your project and use any name you like for the screen size.
The value you specify will be used as minimum width utilities for each breakpoint. For example,
the min width for the ‘md’ breakpoint in our case is ‘768px’.
Here’s an example of how these classes work in your template;

<img class="w-16 md:w-32 lg:w-48" src="...">
Removing/Disabling Utilities
In the Tailwind config, you can also disable specific core plugins from your project. The
‘corePlugins’ section lets you specify Tailwind’s utility classes to remove from your project. This
can be a useful practice when optimizing your code for production.
To disable specific core plugins, specify the utility class name in the ‘corePlugins’ object and set
the value to false. Here is an example code to disable the float utilities.
module.exports = {
// ...
corePlugins: {
float: false,
objectFit: false,
objectPosition: false,
}
}
If you’d like to only allow specific utility classes for your project, you can specify a safelist using
the ‘corePlugins’ as an array. Here is an example code that only allows padding, margin, and
background color utilities.
module.exports = {
corePlugins: [
'margin', // padding utilities
'padding', // padding utilities
'backgroundColor', // background color utilities
// ...
]
}
Note: You can add as many utility classes as you need in the ‘corePlugins’ array. Only these
classes will be exported to your output.css file.
Tailwind config also allows you to disable all utility classes. This means you’re using Tailwind as
a building block for your project. But you won’t be able to use any utility classes Tailwind
provides. To disable all utilities, add an empty array in the ‘corePlugins’ section.

module.exports = {
corePlugins: [] // disables all utility classes
}
Now you know how to add and remove utility classes in Tailwind config. Let’s explore how to
add colors and custom fonts.
Modifying Colors
With the Tailwind configuration, you can define the colors you want for your web project. To
register your custom colors, add the colors property within the extend section.
For our example, we’ll register a brand color and add three variants of this color to the Tailwind
config.
module.exports = {
// ...
theme: {},
extend: {
colors: {
brand: '#add4ed' // Add brand color
},
},
// ...
}
You can also define custom color shades and use them in your styles. For example, let’s update
the code above with 3 variants of the brand color.
So, instead of adding the hex value for the brand color, we’ll convert it into an object and enter
the 3 colors as parameters for the brand object.
module.exports = {
// ...
theme: {},
extend: {
colors: {
brand: {
light: '#58a7db',
dark: '#013c63',
neutral: '#add4ed'
},
},

},
// ...
}
When you build your CSS, these custom colors will be added to your output.css file. Tailwind
will generate utilities for text colors, background colors, etc., based on your defined custom
classes.
In your HTML template, you can use the text-brand-light or bg-brand-dark CSS classes,
which will apply the color we defined in the tailwind.config.css file.
Note: The object name we specified in Tailwind config is what is used for the Tailwind class
names. You can replace ‘brand’ with any name you like. Just make sure the class name you add
to your template matches the utility class name you defined.
Typography and Spacing
Typography controls the font sizes of elements on your web page. Although Tailwind CSS
provides custom utility classes that control font sizes, you can build on this and define custom
sizes for your project.
Typography and spacing classes are added within the extend block in the tailwind.config.js file.
Here is an example.
module.exports = {
// ...
theme: {},
extend: {
fontSize: {
'extreme': '8rem', // Define a custom font size
},
spacing: {
'96': '24rem', // Define a custom spacing value
},
},
// ...
}
Within the fontSize element, you can define unlimited sizes as you need for your project. The
name ‘extreme’ can be any string value you like. This is the name you’ll add to the class name
when using the custom utility you created. Here is an example of using the extreme class we
created.

<p class="text-extreme"> This is a very large text </p>
Adding Custom Fonts
In Tailwind config, you can define font family utilities for your project. Before registering a font,

you’ll need to import the font into the input.css file. For example, say we want to use the Nunito
font family for our project. The first step is to add it as an import to the input.css file.
After importing the font, you’ll need to register it as a font in your Tailwind config file
configuration. Let’s modify our Tailwind config to include the imported font.
module.exports = {
// ...
theme: {},
extend: {
colors: {
brand: {
light: '#58a7db',
dark: '#013c63',
neutral: '#add4ed'
},
},
fontFamily: {
temp: ['Nunito'], // Use anything you like as the array name
},
},
// ...
}
We use the fontFamily object to register custom fonts. You can name the array anything you
like. Just make sure the font family is added as a value in the array.
In your page template, you’ll use the name entered as the class name for the font. Here is an
example.

<body class="font-temp">
...
</body>

Adding this class will update your web page’s template to use the Nunito font we imported.
Tailwind config supports unlimited customizations for almost any part or element on your web
page. You can define custom border radius utilities, display utilities, animation utilities, etc. You
just need to ensure you enter the correct object for the utility you want to modify or extend.
For example, to extend the border radius utility, you’ll need to use ‘borderRadius’ as the object
in the tailwind.config.js file.
Advanced Tailwind Config Technique
Using Variants
Tailwind CSS allows you to target specific variants, such as hover, focus, and responsive
classes. Here’s an example of targeting a specific screen size:
module.exports = {
// ...
variants: {
extend: {
textColor: ['hover'], // Apply text color on hover
borderWidth: ['first'], // Apply border width to the first child
},
},
// ...
}
If you’re using Tailwind CSS v3.0, every variant is automatically available for every utility by
default. So you can remove the variants section from your tailwind.config.js file and it would still
work as intended.
Optimizing For Production
When you add custom utility classes to your Tailwind project, each of the Tailwind class names
generate extra utilities in your output CSS file.
In most cases, these extra utility classes may not be needed for your project, especially if you
just want to change the text and background color.
This is where optimizing your code comes into play. One essential optimization technique is
purging unused styles. When you purge unused styles, only those used on your HTML template
will be exported.
To purge the configuration cache, add the purge option to the tailwind.config.js file.
module.exports = {
// ...
purge: ['./src/**/*.html', './src/**/*.js'], // Paths to your project files

// ...
}
The code above reduces the size of the site files when you run the build command. This, in turn,
increases the loading speed of the webpage.
Extending the Configuration
Earlier, we mentioned that Tailwind is a utility-based CSS framework that provides classes to
build web interfaces faster. In addition to the default classes, you can install and use plugins to
extend the features and utility classes Tailwind provides.
Tailwind Config Plugins: How do I Add plugins to Tailwind
Config?
Tailwind CSS is a utility-based frontend framework that provides plugins that can extend its
functionality. You can install and configure plugins to add new utility classes, components, or
features to your project.
For instance, the Typography plugin adds typography-related utility classes. To install this
plugin, run the command below in your terminal window.
npm install @tailwindcss/typography
Once the installation completes, you’ll need to register it as a plugin in the configuration file.
module.exports = {
// ...

plugins: [
require('@tailwindcss/typography'),
// Add other plugins as needed
],
// ...
}
Note: Any plugin you install would need to be added as a requirement in the plugins section of
the tailwind.config.js file.
There are other plugins from Tailwind developers that you could use to add functionalities to
your web project. For example, there are plugins for forms, container queries, and adding
aspect ratios to your web page.
Third-party Integration for Tailwind Config
In addition to official plugins, third-party packages can enhance your Tailwind CSS experience.
Examples include Purecode AI, which provides pre-designed AI-generated components, and
various theme packages that offer pre-configured styles.
Get Started With Purecode
Other Tailwind CSS 3rd-party components to integrate with your project:
daisyUI
MambaUI
Tailwind Elements
Frequently Asked Questions
These are answers to some top questions about using the Tailwind config.
Where is Tailwind config file?
By default, the Tailwind CSS configuration file sits under the hood until you initialize it using the
Tailwind CLI utility included with every Tailwind CSS project. After initializing it, you can then
define your own utilities within the tailwind.config.js file.
How do you use Tailwind config in React?
Tailwind config can be added to a React project similar to how you would a vanilla web project.
If you’ve installed Tailwind CSS, simply run the npx tailwindcss init command in the root
directory of your project.
How do I add plugins to Tailwind config?

Tailwind provides many plugins to extend the functionality of the framework. To add a plugin to
the tailwind.config.js file, you’ll first need to make sure the plugin is installed in your project’s
directory. After installing the plugin, you’ll then need to register it in the config file under the
plugins section. For more details, see the plugins section of this guide.
What is Tailwind preset?
The Presets option specifies different configurations to use as the base instead of the default
tailwind config. It also helps you organize customizations you want to use across projects.
Related Content
If you’d like to learn more about using Tailwind for your project, check out the following tutorials:
1. Understanding how Tailwind width works
2. Ultimate guide to Tailwind colors
3. How to create and use carousels in Tailwind
Conclusion
A utility-based CSS framework gives you more customization options when building your web
project. Thus, the Tailwind config file makes extending the default utility classes easy.
In this tutorial, we covered how to generate and use the Tailwind configuration file. As a
reminder, only add your custom code to the Tailwind configuration’s theme object if you wish to
override any default utility Tailwind provides.
If you want to improve your team’s workflow, check out some of our custom templates that help
reduce development time. Purecode provides over 10k templates to integrate into your project
running on libraries such as Tailwind CSS and Material UI.
Access Purecode’s Tailwind Components
Share this:
David Ozokoye
Software Engineer and Technical Writer
More blogs
   

CSS
Why You Need to Use CSS Minification for Web Performance
01 Mar 2024 12 min read
CSS
Top CSS Shape Generator Tools That Will Make Your Life Easier
26 Feb 2024 12 min read
CSS
Best CSS Background Generator Tools for Stunning Websites
26 Feb 2024 9 min read

Tailwind Blogs
Tailwind Dropdown
Tailwind Cards
Tailwind Config
Tailwind Buttons
Tailwind Breakpoints
Tailwind Grid
MUI Blogs
MUI Typgraphy
MUI Tooltip
MUI Appbar
MUI Stack
MUI Slider
MUI Select
Bootstrap Blogs
Bootstrap vs MUI

How to Use Tailwind Config to Customize Theme Styles

More Related Content

Similar to How to Use Tailwind Config to Customize Theme Styles (20)

More from RonDosh (19)

Recently uploaded (20)

How to Use Tailwind Config to Customize Theme Styles