Tailwind CSS Customizing Styles

Although Tailwind CSS provides a very comprehensive default design system, almost every project has its unique brand and style requirements. The power of Tailwind lies in its extremely high customizability. This chapter explores two main methods for customizing styles: modifying theme configuration and using arbitrary values.

1. Customizing Themes via `tailwind.config.js`

This is the most structured and recommended customization method, suitable for values you want to reuse throughout your project (like brand colors, specific spacing units, etc.).

All theme-related customization is done in the theme or theme.extend objects in the tailwind.config.js file.

Best Practice: Always put your custom items in theme.extend to preserve Tailwind's default values, only adding or overriding the parts you specify.

Example: Custom Colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1DA1F2',
        'secondary': '#14171A',
        'accent': {
          'light': '#AAB8C2',
          'dark': '#657786',
        },
      },
    },
  },
}

Now you can use these new color utility classes in your project:

html

<button class="bg-primary text-white">Follow</button>
<p class="text-accent-dark">A subtle message</p>

Example: Custom Spacing and Fonts

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        'sans': ['Inter', 'ui-sans-serif', 'system-ui'],
        'serif': ['Merriweather', 'ui-serif'],
      },
    },
  },
}

2. Using Arbitrary Values

Starting from Tailwind CSS v3, the JIT engine allows you to use square bracket [] syntax to create temporary, one-time utility classes. This is very useful when you only need to apply a very specific value that's unlikely to be reused.

Syntax: property-[value]

Examples:

html

<!-- A very specific top margin -->
<div class="top-[117px]">...</div>

<!-- A calculated width -->
<div class="w-[calc(100%-2rem)]">...</div>

<!-- An arbitrary color value -->
<div class="bg-[#bada55]">...</div>

Advantages:

Quick and convenient: No need to modify configuration files, you can directly implement precise styles in HTML.
Avoid configuration bloat: For "magic numbers" that are only used once, you can avoid cluttering your tailwind.config.js.

When to Use Which Method?

Use theme customization: When you need to define a value that will be reused multiple times in your project. For example, your brand primary colors, standard component spacing, website fonts, etc. This helps maintain design consistency.
Use arbitrary values: When you need a one-time specific value that's unlikely to be repeated elsewhere. For example, fine-tuning to perfectly align a background image.

By combining these two methods, you can both maintain a consistent, controllable design system and have enough flexibility to handle special cases when needed.

Tailwind CSS Customizing Styles ​

1. Customizing Themes via tailwind.config.js ​

Example: Custom Colors ​

Example: Custom Spacing and Fonts ​