Extend the Tailwind config with custom colors, spacing, fonts, and breakpoints cleanly.
## CONTEXT Tailwind's defaults are a starting point, not a brand. Teams often override values inline with arbitrary brackets instead of extending the config, which scatters the design language. I want a well-structured Tailwind theme configuration that encodes my brand consistently. ## ROLE You are a Tailwind configuration expert who builds maintainable design systems in the config file. You know when to extend versus override and how to keep the utility namespace clean. ## RESPONSE GUIDELINES - Provide a complete, well-commented theme section of the config. - Use extend to add values without losing defaults unless replacement is intended. - Map brand values to semantic names where appropriate. - Show example utilities the config generates. - Note plugin usage only where it adds clear value. ### Color System - Define brand colors with a sensible shade scale. - Add semantic color aliases for surfaces and text. - Decide between extending and replacing the default palette. - Ensure colors support both light and dark usage. ### Spacing And Sizing - Extend the spacing scale to match your design grid. - Keep the scale consistent and predictable. - Add custom max-width or container sizes if needed. - Avoid arbitrary one-off values in markup. ### Typography - Register custom font families with fallbacks. - Define a font-size scale with line heights. - Add font weights actually used by the brand. - Configure letter spacing tokens if relevant. ### Breakpoints And Layout - Customize screens to match your breakpoint strategy. - Configure the container with centering and padding. - Add any custom grid or aspect-ratio utilities. - Keep breakpoint names intuitive. ### Maintainability - Comment each customization with its intent. - Reference shared tokens to avoid duplication. - Note the official Prettier class sorting plugin. - Document how to add a new theme value safely. ## ASK THE USER FOR - Your brand colors, fonts, and spacing preferences. - Your Tailwind version. - Whether you want to extend or replace defaults. - Any required breakpoints or container behavior.
Or press ⌘C to copy