tailwindcss
TailwindCSS teaches utility-first CSS framework expertise with mobile-first responsive design. Learn to apply Tailwind classes directly in templates, use responsive prefixes, and implement dark mode—all without @apply in production.
TailwindCSS skill teaches utility-first styling with responsive design patterns for modern web development.
AI-generated summary based on this skill's SKILL.md
Install
Mindrally/skills/tailwindcss
git clone https://github.com/Mindrally/skills
cp -r skills/tailwindcss ~/.claude/skills/tailwindcssnpx skillfed install Mindrally/skills/tailwindcssFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tailwind css utility classes and how do I use them?
TailwindCSS utility classes are single-purpose CSS classes that you apply directly in your HTML or templates. Instead of writing custom CSS, TailwindCSS provides pre-built classes like `flex`, `p-4`, `text-lg`, and `bg-blue-500` that you combine to style elements. This utility-first approach eliminates context-switching between markup and stylesheets, letting you build designs faster by composing classes directly where you need them.
How does TailwindCSS handle responsive design with mobile-first breakpoints?
TailwindCSS uses mobile-first responsive design: you write base styles for mobile, then use breakpoint prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) to override them on larger screens. For example, `w-full md:w-1/2 lg:w-1/3` makes an element full-width on mobile, half-width at medium breakpoints, and one-third at large breakpoints. This ensures your layouts adapt gracefully across all device sizes.
What's the best way to implement dark mode in TailwindCSS?
TailwindCSS dark mode implementation uses the `dark:` prefix to apply styles when dark mode is active. Configure your `tailwind.config.js` with `darkMode: 'class'` (class-based) or `'media'` (system preference). Then use classes like `bg-white dark:bg-slate-900` and `text-black dark:text-white`. Class-based mode gives you manual control; media-based respects the user's OS settings automatically.
How do I integrate TailwindCSS with React, Vue, or Alpine.js frameworks?
TailwindCSS integrates seamlessly with all modern frameworks. Install via npm, add `@tailwind` directives to your CSS, and configure your `tailwind.config.js` to scan your template files. In React/Next.js, apply Tailwind classes directly to JSX elements. In Vue, use classes in templates. In Alpine.js, bind classes dynamically with `x-bind:class`. Each framework works identically—TailwindCSS processes your templates and generates only the CSS you use.
What are TailwindCSS flexbox and grid layout utilities?
TailwindCSS provides utilities for flexbox (`flex`, `flex-col`, `justify-center`, `items-start`, `gap-4`) and grid (`grid`, `grid-cols-3`, `grid-rows-2`, `col-span-2`). These let you build complex layouts without writing custom CSS. Combine them with responsive prefixes—`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`—to create adaptive layouts. Spacing utilities like `gap-4` and `p-6` control padding and gaps consistently.
How can I optimize TailwindCSS performance in production?
TailwindCSS optimizes automatically by scanning your template files and generating only the CSS you actually use. Configure your `tailwind.config.js` content array to include all template paths. Modern TailwindCSS uses JIT (Just-In-Time) compilation by default, eliminating the need for manual mode switching. In production, your CSS bundle includes only used classes, keeping file sizes minimal and load times fast.
SKILL.md
rendered from the published skill — quoted content, verbatim
TailwindCSS
You are an expert in TailwindCSS utility-first CSS framework with deep knowledge of responsive design and component styling.
Core Principles
- Use Tailwind utility classes extensively in your templates
- Never use @apply directive in production
- Follow utility-first approach for all styling
- Use responsive design with a mobile-first approach
Usage Guidelines
- Apply Tailwind classes directly in HTML/JSX
- Leverage Tailwind's built-in responsive prefixes (sm:, md:, lg:, xl:, 2xl:)
- Use Tailwind's color palette and spacing scale consistently
- Implement dark mode using Tailwind's dark: variant
Component Styling
- Use consistent spacing using Tailwind's spacing scale
- Apply consistent typography using Tailwind's font utilities
- Leverage flexbox and grid utilities for layouts
- Use Tailwind's transition utilities for animations
Best Practices
- Group related utilities logically
- Use component extraction for repeated patterns
- Leverage Tailwind's configuration for custom themes
- Use JIT mode for optimal performance
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
tailwindcss/SKILL.md