CSS and Tailwind styling guidelines. Use when writing styles, creating UI components, reviewing CSS/Tailwind code, or deciding on wrapper element structure.
Styling Guidelines
Minimize Wrapper Elements
Avoid creating unnecessary wrapper divs. If classes can be applied directly to an existing semantic element with the same outcome, prefer that approach.
Good (Direct Application)
<main class="flex-1 mx-auto max-w-7xl">
{@render children()}
</main>
Avoid (Unnecessary Wrapper)
<main class="flex-1">
<div class="mx-auto max-w-7xl">
{@render children()}
</div>
</main>
This principle applies to all elements where the styling doesn't conflict with the element's semantic purpose or create layout issues.
Tailwind Best Practices
- Use the
cn()utility from$lib/utilsfor combining classes conditionally - Prefer utility classes over custom CSS
- Use
tailwind-variantsfor component variant systems - Follow the
background/foregroundconvention for colors - Leverage CSS variables for theme consistency
You Might Also Like
Related Skills
verify
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
facebooktest
Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.
facebookfeature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
facebookextract-errors
Use when adding new error messages to React, or seeing "unknown error code" warnings.
facebook