Tailwind

Instructions

• Use Tailwind CSS classes to style HTML, check and use existing tailwind conventions within the project before writing your own.
• Offer to extract repeated patterns into components that match the project's conventions (i.e. Blade, JSX, Vue, etc..)
• Think through class placement, order, priority, and defaults - remove redundant classes, add classes to parent or child carefully to limit repetition, group elements logically
• Always use Tailwind CSS v4 - do not use the deprecated utilities.
• corePlugins is not supported in Tailwind v4.

Dark Mode

• If existing pages and components support dark mode, new pages and components must support dark mode in a similar way, typically using dark:.

Examples