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

In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed.

<code-snippet name="Extending Theme in CSS" lang="css"> @theme { --color-brand: oklch(0.72 0.11 178); } </code-snippet>

In Tailwind v4, you import Tailwind using a regular CSS @import statement, not using the @tailwind directives used in v3:

<code-snippet name="Tailwind v4 Import Tailwind Diff" lang="diff"> - @tailwind base; - @tailwind components; - @tailwind utilities; + @import "tailwindcss"; </code-snippet>

Replaced Utilities

Tailwind v4 removed deprecated utilities. Do not use the deprecated option - use the replacement.
Opacity values are still numeric.

| Deprecated | Replacement | |------------+--------------| | bg-opacity- | bg-black/ | | text-opacity- | text-black/ | | border-opacity- | border-black/ | | divide-opacity- | divide-black/ | | ring-opacity- | ring-black/ | | placeholder-opacity- | placeholder-black/ | | flex-shrink- | shrink- | | flex-grow- | grow- | | overflow-ellipsis | text-ellipsis | | decoration-slice | box-decoration-slice | | decoration-clone | box-decoration-clone |

Spacing

When listing items, use gap utilities for spacing, don't use margins.

<code-snippet name="Valid Flex Gap Spacing Example" lang="html"> <div class="flex gap-8"> <div>Superior</div> <div>Michigan</div> <div>Erie</div> </div> </code-snippet>

npx skills add markhamsquareventures/essentials --skill tailwind