Up until now, we’ve been using Tailwind’s default styles — default colors, spacing scale, fonts, and layout sizing. But real projects usually need brand identity, like:

• A custom brand color
• A specific font family
• Standard button sizes
• Custom spacing or shadows

That’s where tailwind.config.js comes in.

This file allows you to extend Tailwind and build your own UI style system, while still using Tailwind utilities.

🎯 What You Will Learn

🛠 Step 1: Create the Config File

If your project doesn’t have it yet, run:

npx tailwindcss init

This generates:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
}

This is where we customize Tailwind.

🎨 Step 2: Add Custom Colors

Let’s say your brand color is a shade of purple (#6366F1).

Add it under theme.extend.colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#6366F1",
      },
    },
  },
};

Now you can use it everywhere:

<button class="bg-brand text-white px-4 py-2 rounded">
  Brand Button
</button>

💡 No need to remember hex codes ever again.

🖋 Step 3: Add Custom Fonts

Example — using Inter from Google Fonts:

1) Import font in your CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

2) Register it in config:

extend: {
  fontFamily: {
    sans: ["Inter", "sans-serif"],
  },
},

Use it:

<h1 class="font-sans text-3xl font-bold">Hello Tailwind</h1>

Smooth and consistent typography ✅

📦 Step 4: Configure Container Layout

Tailwind has a container utility, and we can set its max width and center behavior:

extend: {
  container: {
    center: true,
    padding: "1.5rem",
  },
},

Usage:

<div class="container">
  <h1 class="text-2xl font-bold">Centered Layout</h1>
</div>

This ensures your website layout stays neat and aligned.

🧪 Mini Demo: Custom-Themed Card

Once we’ve added custom fonts and colors:

<div class="max-w-sm mx-auto p-6 bg-white rounded-xl shadow-md text-center font-sans">
  <h2 class="text-2xl font-bold text-brand mb-2">Tailwind Custom Branding</h2>
  <p class="text-gray-600 mb-4">
    Tailwind makes it easy to build your own design system.
  </p>
  <button class="bg-brand hover:bg-brand/90 text-white px-4 py-2 rounded-lg transition duration-300">
    Learn More
  </button>
</div>

This component now has your brand identity — not just Tailwind defaults.

✅ Summary

By customizing Tailwind properly, you create a maintainable design system that scales across your project.