0
0
Tailwindmarkup~5 mins

Extending default theme values in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Extending default theme values lets you add your own colors, fonts, or sizes without losing the original Tailwind styles.

You want to add a new brand color alongside Tailwind's default colors.
You need a custom font size that Tailwind doesn't include by default.
You want to add extra spacing options without removing the existing ones.
You want to keep Tailwind's default styles but add your own unique styles.
You want to customize your design while still using Tailwind's utility classes.
Syntax
Tailwind
module.exports = {
  theme: {
    extend: {
      propertyName: {
        key: 'value'
      }
    }
  }
}

extend is used inside the theme section to add new values.

You keep all default values and add your own by placing them inside extend.

Examples
Adds a new color named brandBlue without removing default colors.
Tailwind
module.exports = {
  theme: {
    extend: {
      colors: {
        brandBlue: '#1DA1F2'
      }
    }
  }
}
Adds a very small font size called xxs alongside default sizes.
Tailwind
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xxs': '0.65rem'
      }
    }
  }
}
Adds extra spacing sizes 72 and 84 for margin or padding.
Tailwind
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem'
      }
    }
  }
}
Sample Program

This example shows how to add a new color brandBlue and a tiny font size xxs. The heading uses the new color, and the paragraph uses the new font size.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Extend Theme Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brandBlue: '#1DA1F2'
          },
          fontSize: {
            xxs: '0.65rem'
          }
        }
      }
    }
  </script>
</head>
<body class="p-6">
  <h1 class="text-brandBlue text-3xl font-bold">Hello Brand Blue!</h1>
  <p class="text-xxs mt-2">This is extra small text using extended font size.</p>
</body>
</html>
OutputSuccess
Important Notes

Always use extend to add values so you don't remove Tailwind's defaults.

You can extend colors, spacing, font sizes, and many other theme properties.

Use the Tailwind CDN tailwind.config object for quick testing or update your tailwind.config.js file in projects.

Summary

Use extend inside theme to add new styles without losing defaults.

You can add colors, font sizes, spacing, and more this way.

This helps keep your design consistent and easy to update.