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.

/** @type {import('tailwindcss').Config} */

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;

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->

<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.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

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.

/** @type {import('tailwindcss').Config} */

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.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

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.

// tailwind.config.js

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.

// tailwind.config.js

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.

// tailwind.config.js

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.

<!-- Using extreme font size for text -->

<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.

// tailwind.config.js

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.

<!-- Change default font to Nunito -->

<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:

// tailwind.config.js

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.

// tailwind.config.js

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.

// tailwind.config.js

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

‘Original article published here’