tailwindcss
Tailwind CSS utility-first styling patterns. Use when styling components, building layouts, or customizing design for the Todo frontend.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install nimranaz148-spec-driven-todo-app-2-tailwindcss
Repository
Skill path: .claude/skills/tailwindcss
Tailwind CSS utility-first styling patterns. Use when styling components, building layouts, or customizing design for the Todo frontend.
Open repositoryBest for
Primary workflow: Design Product.
Technical facets: Full Stack, Frontend, Designer.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: nimranaz148.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install tailwindcss into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/nimranaz148/spec-driven-ToDo-App-2 before adding tailwindcss to shared team environments
- Use tailwindcss for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
--- name: tailwindcss description: Tailwind CSS utility-first styling patterns. Use when styling components, building layouts, or customizing design for the Todo frontend. allowed-tools: Read, Edit, Write, Glob, Grep, Bash --- # Tailwind CSS Skill ## Quick Reference Tailwind CSS is a utility-first CSS framework for styling the Next.js frontend. ## Common Classes ### Layout ```html <div class="container mx-auto p-4">Container with padding</div> <div class="flex items-center gap-4">Flex layout</div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">Grid</div> <div class="space-y-4">Vertical spacing</div> ``` ### Typography ```html <h1 class="text-2xl font-bold">Heading</h1> <p class="text-gray-600">Gray text</p> <span class="line-through">Strikethrough</span> ``` ### Colors ```html <button class="bg-blue-500 text-white">Blue button</button> <input class="border border-gray-300">Gray border</input> <div class="bg-red-100 text-red-800">Red background</div> ``` ### Interactive ```html <button class="hover:bg-blue-600">Hover state</button> <button class="disabled:opacity-50">Disabled</button> <input class="focus:ring-2 focus:ring-blue-500">Focus ring</input> ``` ## For Detailed Reference See [REFERENCE.md](REFERENCE.md) for: - Complete class reference - Responsive design - Dark mode - Custom configuration