From fls
Frontend styling with Tailwind including applying classes to templates and components, creating UI elements, reviewing markup, modifying component classes, and building Tailwind.
npx claudepluginhub preludetech/django-craftThis skill is limited to using the following tools:
- Build: `npm run tailwind_build`
Guides Tailwind CSS usage with utility-first classes, responsive design, dark mode, custom configs, design tokens, and scalable patterns using component libraries like shadcn/ui.
Provides Tailwind CSS best practices for frontend apps including layout utilities like v-stack, responsive stacks, color schemes, and cn() className merging.
Guides Tailwind CSS mastery: v3/v4 configuration, custom plugins, responsive design with breakpoints and container queries, dark mode via class strategy and semantic tokens, performance optimization, and CVA patterns.
Share bugs, ideas, or general feedback.
npm run tailwind_buildnpm run tailwind_watchtailwind.components.cssALWAYS check tailwind.components.css before writing Tailwind classes
cat tailwind.components.css
Typography and forms have automatic styling via @layer base:
h1-h4 - Pre-sizeda - link stylingul, ol - List stylinginput, textarea, select, label - Form stylingDon't duplicate these in your markup
Available in tailwind.components.css:
.btn, .btn-primary, .btn-danger - Buttons.surface - Cards/panelstailwind.components.css first - Use component classes when availabletext-4xl font-bold to <h1>tailwind.components.csstailwind.components.css for things that are likely to be reused.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>
Code must be as clean as possible.
When styling any element: