Extending Tailwind's Default Stylesheet

Tailwind's utility list is massive, but you will eventually need custom colors matching your brand, unique spacing rules, or custom font families.

All customization happens inside tailwind.config.js.

Configuration Anatomy

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    // 1. OVERWRITE the default system:
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    // 2. EXTEND the default system (Recommended):
    extend: {
      colors: {
        brand: {
          50: '#f0fdfa',
          500: '#14b8a6',
          600: '#0d9488',
          900: '#115e59',
        }
      },
      spacing: {
        '128': '32rem', // custom 512px spacing
      }
    }
  },
  plugins: [],
}

If you place keys inside theme.extend, they are added to the existing scales. If you place them directly inside theme, they overwrite the default Tailwind scales entirely (e.g. all default colors would disappear if you overwrite colors instead of extending them!).

Arbitrary Values (The escape hatch)

What if you need a one-off value and don't want to define it in the config file? For example, setting an element's width to exactly 327px, or setting a background color to a specific HEX value from a client logo?

Use Tailwind's arbitrary value syntax: wrap the value in square brackets [...].

• Custom Width: w-[327px] compiles to width: 327px;
• Custom Color: bg-[#0f172a] compiles to background-color: #0f172a;
• Custom Grid columns: grid-cols-[200px_1fr_100px]
• Arbitrary Text Size: text-[1.375rem]

Arbitrary values are powerful but should be used sparingly. Overusing them breaks consistency and defeats the purpose of having a design system. Use them as an escape hatch, not as your main workflow.

Practice task

In the editor below:

1. Use an arbitrary background color bg-[#0f172a] on the card header.
2. Set the height of the header area to exactly h-[140px] using arbitrary sizing.
3. Make the decorative circle position absolute with custom offset top: top-[-45px] and left left-[24px].