frontend-styling

name	frontend-styling
description	Frontend styling with Tailwind including applying classes to templates and components, creating UI elements, reviewing markup, modifying component classes, and building Tailwind.
allowed-tools	Read, Grep, Glob

Frontend Styling

TailwindCSS v4

• Build: npm run tailwind_build
• Watch: npm run tailwind_watch
• Component classes: tailwind.components.css

Critical Rule

ALWAYS check tailwind.components.css before writing Tailwind classes

cat tailwind.components.css

Base Styles (Auto-Applied)

Typography and forms have automatic styling via @layer base:

• h1-h4 - Pre-sized
• a - link styling
• ul, ol - List styling
• input, textarea, select, label - Form styling

Don't duplicate these in your markup

Component Classes

Available in tailwind.components.css:

• .btn, .btn-primary, .btn-danger - Buttons
• .surface - Cards/panels
• Form components

Usage Rules

1. Check tailwind.components.css first - Use component classes when available
2. Rely on base styles - Don't add text-4xl font-bold to <h1>
3. Inline classes only for unique styling - Layout, spacing, positioning
4. Keep it DRY - Repeated patterns -> add to tailwind.components.css
5. Keep it cohesive - Styles that only appear once, or that are specific to a single page or location should be inline. Only use tailwind.components.css for things that are likely to be reused.

Example

BAD:

<h1 class="text-4xl font-bold">Title</h1>
<button class="px-6 py-2 bg-blue-600...">Click</button>

GOOD:

<h1>Title</h1>
<button class="btn btn-primary">Click</button>

IMPORTANT

Code must be as clean as possible.

When styling any element:

• Consider how it will behave if there are other elements on a page. For example if you are hard-coding a z-index or a position, will it mess with anything?
• Look over all the classes applied to the element: They should all be there for a purpose. Don't add extra things that are not needed.