Personalize your theme

Choose an accent color & a base color, then preview components.

Theme colors

Accent color
Base palette

Your Tailwind theme

Paste this after @import "tailwindcss";. It includes coordinated light and dark values. Or copy an AI prompt that installs the CSS and migrates your components to semantic tokens.

Keep your Rails Blocks CSS up to date

Themes rely on the latest installation CSS for semantic primary tokens, dark-mode defaults, and form styles. Re-check the updated Custom CSS, or use Copy AI prompt so an LLM can verify and update your setup.

Component preview

Using your theme

Generate the CSS, paste it after your Tailwind import, then use semantic, unnumbered utilities instead of hardcoded brand colors. Use bg-primary hover:bg-primary-hover for primary actions, text-primary-foreground for content on those actions, and text-primary-content or ring-primary-content for links, emphasis, and focus states. Their values switch with dark mode, while neutral-* utilities use your base palette for surfaces, borders, and body text. I'd recommend keeping red, amber, green, and blue for true status UI.