Extend TailwindCSS Theme for Custom Design Tokens

Use this AI prompt to extend your TailwindCSS configuration file with custom tokens for brand colors, typography, spacing, and breakpoints.

🧠 What This Prompt Does

This AI prompt helps you extend the TailwindCSS theme for branding and consistent design systems.
It adds custom colors, fonts, spacing, and screen sizes to make your UI more personalized.

---

💬 The Prompt

You are a Tailwind configuration expert.
Extend the TailwindCSS theme with:

- Custom colors
- Font families
- Spacing scale
- Breakpoints
  Also, show example usage in a component.

---

🚀 Example Output (AI Generated)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: '#2563EB',
          light: '#60A5FA',
          dark: '#1E40AF',
        },
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui'],
      },
      spacing: {
        128: '32rem',
        144: '36rem',
      },
      screens: {
        '2xl': '1536px',
      },
    },
  },
  plugins: [],
};

---

📘 When to Use This Prompt

• To align design with branding guidelines.
• When building UI kits or reusable component libraries.
• When scaling apps with consistent tokens.

---

💡 Best Practices

• Define tokens for color and typography early in design.
• Use semantic color names like brand, accent, or surface.
• Extend screens for better responsive layouts.
• Keep spacing units consistent with your design system.

---

🏁 Summary

This prompt helps you extend and customize Tailwind’s default theme, creating a scalable, branded design foundation for your project.