Search⌘ K
AI Features
Home
Courses
Understanding the Basics of Tailwind CSS

Customizing Tailwind

Explore how to customize Tailwind CSS by creating new projects, modifying themes, and adjusting responsive breakpoints. Understand ways to extend or override default utilities to build flexible, efficient designs and optimize your development workflow.

We'll cover the following...

In this chapter, we’ll dive even deeper and explore how we can customize Tailwind either by adding new utilities or by tweaking the existing ones.

Creating a new project

Tailwind is already a very versatile tool for CSS, but there will be times when we’ll want to add extra features to it. In this lesson, we’ll explore the most common ways Tailwind can be customized to suit our needs.

First, we need to create a new Tailwind project.

Next, we’ll create an index.html file in the root directory and add the following content to it:

HTML
<!-- /index.html -->
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" ➥rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
  
</body>
</html>

We have a bunch of links here:

  • Line 8: The first link includes the compiled Tailwind styles.

  • Line 9: The second link includes the Font Awesome icons library. We’ll use its icons in the examples later on.

  • Line 10: The third link includes the Carter One font from the Google Fonts collection. We’ll incorporate this font into the examples later on.

The following image shows what this font looks like.

A sample of the Carter One font
A sample of the Carter One font

To demonstrate Tailwind’s customization features, we’ll reuse the responsive header. We’ll copy the header section and add it to the index.html file.

Click the “Run” button to see our app.

<!-- /index.html -->
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>

<body>
  <header class="flex items-center justify-between 
                 flex-wrap bg-gray-800 py-4 w-full">
    <div class="flex-shrink-0 ml-6">
      <a href="#">
        <i class="fas fa-drafting-compass fa-2x text-yellow-500"></i>
        <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
      </a>
    </div>

    <button id="nav-toggle" class="md:hidden p-2 mr-4 ml-6 my-2 border 
           rounded border-gray-600 text-blue-200 hover:border-blue-200">
        <i class="fas fa-bars fa-2x"></i>
			</button>

    <div class="pl-6 w-full md:w-auto hidden md:block" id="nav-content">
      <ul class="md:flex">
        <li class="mr-6 p-1 md:border-b-2 border-yellow-500">
          <a class="text-blue-200 cursor-default" href="#">Home</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Services</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Projects</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Team</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">About</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </header>
  <script>
    document.getElementById('nav-toggle').onclick = function(){
    document.getElementById("nav-content").classList.toggle("hidden");
  }
  </script>
</body>

</html>
Tailwind customisation

Note: To see the full view you can click the URL, and you can resize the screen to see the hamburger.

We also need to remember to add the script part because otherwise, the menu won’t work. Now we’re ready to dive into the actual customization.

Customizing the default Tailwind theme

As we saw previously, to create a Tailwind configuration file, we run this command:

 npx tailwindcss init

Running the command above creates the following file:

Javascript (babel-node)
// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

We’ve already explored the content key. Now we’ll focus on the theme key. The plugins key will be explored in the next, final part of the series.

The default Tailwind theme can either be overridden, or extended, or both. This gives us a great amount of flexibility.

The theme key allows us to customize four base things: screens, colors, spacing, and core plugins, such as borderRadius, fontFamily, and so on. We’ll explore each one, starting with the screens key.

Customizing Tailwind theme’s responsive breakpoint modifier

The default responsive utility variants can be overridden by adding our own under the screens key like this:

<!-- /index.html -->
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>

<body>
  <header class="flex items-center justify-between 
                 flex-wrap bg-gray-800 py-4 w-full">
    <div class="flex-shrink-0 ml-6">
      <a href="#">
        <i class="fas fa-drafting-compass fa-2x text-yellow-500"></i>
        <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
      </a>
    </div>

    <button id="nav-toggle" class="md:hidden p-2 mr-4 ml-6 my-2 border 
           rounded border-gray-600 text-blue-200 hover:border-blue-200">
        <i class="fas fa-bars fa-2x"></i>
			</button>

    <div class="pl-6 w-full md:w-auto hidden md:block" id="nav-content">
      <ul class="md:flex">
        <li class="mr-6 p-1 md:border-b-2 border-yellow-500">
          <a class="text-blue-200 cursor-default" href="#">Home</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Services</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Projects</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Team</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">About</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </header>
  <script>
    document.getElementById('nav-toggle').onclick = function(){
    document.getElementById("nav-content").classList.toggle("hidden");
  }
  </script>
</body>

</html>
Customizing Tailwind theme

Note: To see the full view, you can click on the URL and you can resize the screen to see the hamburger.

Lines 6–8: In this case, the default variants are discarded and won’t be available along with the newly added ones.

If we want to keep the existing breakpoints and extend them with one or more variants, we have two options.

Adding larger variants

First, if we want to add larger variants, we just add them under the extend key.

<!-- /index.html -->
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>

<body>
  <header class="flex items-center justify-between 
                 flex-wrap bg-gray-800 py-4 w-full">
    <div class="3xl:bg-black">
      <a href="#">
        <i class="fas fa-drafting-compass fa-2x text-yellow-500"></i>
        <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
      </a>
    </div>

    <button id="nav-toggle" class="md:hidden p-2 mr-4 ml-6 my-2 border 
           rounded border-gray-600 text-blue-200 hover:border-blue-200">
        <i class="fas fa-bars fa-2x"></i>
			</button>

    <div class="pl-6 w-full md:w-auto hidden md:block" id="nav-content">
      <ul class="md:flex">
        <li class="mr-6 p-1 md:border-b-2 border-yellow-500">
          <a class="text-blue-200 cursor-default" href="#">Home</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Services</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Projects</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Team</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">About</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </header>
  <script>
    document.getElementById('nav-toggle').onclick = function(){
    document.getElementById("nav-content").classList.toggle("hidden");
  }
  </script>
</body>

</html>
Customizing Tailwind theme by using larger variants

Note: To see the reflected changes, click the URL and resize the screen. The background color of the icon and text will change to black when the width of the screen is 3xl, which is equivalent to 1300px or wider.

Line 8: Here, the default variants are kept, and the new one is added to them.

This approach can also be used to override a single breakpoint. In this case, we use one of the default names and replace its value with a new one. For example:

<!-- /index.html -->
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>

<body>
  <header class="flex items-center justify-between 
                 flex-wrap bg-gray-800 py-4 w-full">
    <div class="md:bg-black">
      <a href="#">
        <i class="fas fa-drafting-compass fa-2x text-yellow-500"></i>
        <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
      </a>
    </div>

    <button id="nav-toggle" class="md:hidden p-2 mr-4 ml-6 my-2 border 
           rounded border-gray-600 text-blue-200 hover:border-blue-200">
        <i class="fas fa-bars fa-2x"></i>
			</button>

    <div class="pl-6 w-full md:w-auto hidden md:block" id="nav-content">
      <ul class="md:flex">
        <li class="mr-6 p-1 md:border-b-2 border-yellow-500">
          <a class="text-blue-200 cursor-default" href="#">Home</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Services</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Projects</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Team</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">About</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </header>
  <script>
    document.getElementById('nav-toggle').onclick = function(){
    document.getElementById("nav-content").classList.toggle("hidden");
  }
  </script>
</body>

</html>
Customizing Tailwind theme by using default names

Note: To see the reflected changes, click the URL and resize the screen. The background color of the icon and text will change to black when the width of the screen is md, which is equivalent to 960px or wider.

Line 8: Here, the md variant’s value is replaced, while the rest of the variants keep their default values.

Adding smaller breakpoints

Second, if we want to add smaller breakpoints, things get a bit more complicated. In this case, we first need to add our smaller breakpoints, and then we need to provide the default utilities after them.

<!-- /index.html -->
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>

<body>
  <header class="flex items-center justify-between 
                 flex-wrap bg-gray-800 py-4 w-full">
    <div class="xs:bg-black">
      <a href="#">
        <i class="fas fa-drafting-compass fa-2x text-yellow-500"></i>
        <span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
      </a>
    </div>

    <button id="nav-toggle" class="md:hidden p-2 mr-4 ml-6 my-2 border 
           rounded border-gray-600 text-blue-200 hover:border-blue-200">
        <i class="fas fa-bars fa-2x"></i>
			</button>

    <div class="pl-6 w-full md:w-auto hidden md:block" id="nav-content">
      <ul class="md:flex">
        <li class="mr-6 p-1 md:border-b-2 border-yellow-500">
          <a class="text-blue-200 cursor-default" href="#">Home</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Services</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Projects</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Team</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">About</a>
        </li>
        <li class="mr-6 p-1">
          <a class="text-white hover:text-blue-300" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </header>
  <script>
    document.getElementById('nav-toggle').onclick = function(){
    document.getElementById("nav-content").classList.toggle("hidden");
  }
  </script>
</body>

</html>
Customizing Tailwind theme by adding smaller breakpoints

Note: To see the reflected changes, click the URL and resize the screen. The background color of the icon and text will change to black when the width of the screen is xs, which is equivalent to 475px or wider.

Lines 1–10: Here, we first import the default theme and use its screens key to include the default responsive utilities after the xs variant. Note that we don’t use the extend key here. So, in fact, we “extend” the breakpoints by redefining them. This is because if we use the extend key, smaller breakpoints will be added to the end of the list, and the order from smallest to largest will be incorrect. In this case, the breakpoints won’t work as expected.