Track
Tailwind CSS
Review utility composition, responsive variants, states, theme tokens, dark mode, reuse boundaries, accessibility, and class conflicts.
- 01
Utility composition readability
Group Tailwind utilities by purpose so reviewers can understand layout, color, state, and motion without decoding one long string.
utilitiesreadabilitycomposition - 02
Responsive breakpoints
Use Tailwind breakpoints as mobile-first overrides instead of locking layouts to a desktop width.
responsivebreakpointslayout - 03
State variants: hover, focus, and disabled
Review interactive utilities as a full state set, not just the hover style that looks good with a mouse.
statesfocusdisabled - 04
Spacing and layout consistency
Use a consistent spacing scale and layout rhythm instead of one-off nudges that make future changes fragile.
spacinglayoutscale - 05
Theme tokens and custom values
Prefer named theme tokens for shared decisions and reserve custom values for truly local exceptions.
themetokensdesign-system - 06
Dark mode variants
Keep dark mode styles paired with the base style so both themes are reviewable in the same component.
dark-modevariantscolor - 07
Class reuse and component boundaries
Extract reusable class decisions at component boundaries instead of duplicating long class lists across call sites.
reusecomponentsduplication - 08
Arbitrary values with restraint
Use arbitrary values for specific layout constraints, not as a replacement for the shared design scale.
arbitrary-valuesscalemaintainability - 09
Accessibility: contrast and focus
Review Tailwind styling for visible focus, readable contrast, and accessible labels on icon-only controls.
accessibilitycontrastfocus - 10
Conditional classes and conflicts
Build conditional class lists so mutually exclusive states cannot accidentally emit conflicting utilities.
conditional-classesconflictsstate
Related tracks
Keep learning inside the same language family.