tailwindcss

mindrally

•

6155 months ago

Source Raw

Expert in TailwindCSS utility-first styling with responsive design patterns

Quick Install

npxskills add mindrally/skills--skill tailwindcss

Instructions

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

Integration Patterns

With React/Next.js

Use className prop for applying Tailwind classes
Leverage cn() utility for conditional classes
Integrate with Shadcn UI and Radix UI components

With Vue

Apply Tailwind classes in template sections
Use :class binding for conditional styling

With Alpine.js

Combine with x-bind:class for reactive styling

Responsive Design

Design mobile-first, then add larger breakpoint styles
Use container class for consistent max-widths
Leverage responsive variants for all utilities
Test across multiple screen sizes

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885