--- name: tailwind-utility-classes user-invocable: false description: Use when working with Tailwind CSS utility classes for layout, spacing, typography, colors, and visual effects. Covers utility-first CSS patterns and class composition. allowed-tools: - Read - Write - Edit - Bash - Grep - Glob --- # Tailwind CSS - Utility Classes Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. ## Key Concepts ### Utility-First Approach Instead of writing custom CSS, compose designs using pre-built utility classes: ```html ``` ### Core Utility Categories #### Layout - **Display**: `block`, `inline-block`, `flex`, `grid`, `hidden` - **Position**: `static`, `relative`, `absolute`, `fixed`, `sticky` - **Flexbox**: `flex-row`, `flex-col`, `justify-center`, `items-center`, `gap-4` - **Grid**: `grid-cols-3`, `grid-rows-2`, `col-span-2`, `row-span-1` #### Spacing - **Padding**: `p-4`, `px-2`, `py-6`, `pt-8`, `pr-3`, `pb-2`, `pl-1` - **Margin**: `m-4`, `mx-auto`, `my-6`, `-mt-4` (negative margins) - **Space Between**: `space-x-4`, `space-y-2` #### Typography - **Font Family**: `font-sans`, `font-serif`, `font-mono` - **Font Size**: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl` - **Font Weight**: `font-thin`, `font-normal`, `font-medium`, `font-semibold`, `font-bold` - **Text Color**: `text-gray-900`, `text-blue-500`, `text-red-600` - **Text Alignment**: `text-left`, `text-center`, `text-right`, `text-justify` - **Line Height**: `leading-none`, `leading-tight`, `leading-normal`, `leading-relaxed` #### Colors & Backgrounds - **Background Color**: `bg-white`, `bg-gray-100`, `bg-blue-500` - **Background Gradient**: `bg-gradient-to-r from-blue-500 to-purple-600` - **Opacity**: `opacity-0`, `opacity-50`, `opacity-100` #### Borders & Shadows - **Border**: `border`, `border-2`, `border-t`, `border-gray-300` - **Border Radius**: `rounded`, `rounded-lg`, `rounded-full`, `rounded-none` - **Box Shadow**: `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl` - **Ring**: `ring-2`, `ring-blue-500`, `ring-offset-2` #### Effects - **Transitions**: `transition`, `transition-all`, `duration-300`, `ease-in-out` - **Transforms**: `scale-110`, `rotate-45`, `translate-x-4`, `skew-y-3` - **Filters**: `blur-sm`, `brightness-50`, `contrast-125`, `grayscale` ## Best Practices ### 1. Responsive Design with Breakpoints Use responsive prefixes for different screen sizes: ```html
Column 1
Column 2

Responsive Heading

``` Breakpoints: - `sm:` - 640px - `md:` - 768px - `lg:` - 1024px - `xl:` - 1280px - `2xl:` - 1536px ### 2. State Variants Apply utilities based on state: ```html

Hover the parent

``` ### 3. Dark Mode Use `dark:` prefix for dark mode styles: ```html
Dark mode compatible content
``` ### 4. Arbitrary Values Use square brackets for one-off custom values: ```html
``` ### 5. Class Organization Order classes logically for readability: ```html
``` ## Examples ### Card Component ```html
Card image

Card Title

Card description goes here with some helpful information.

``` ### Responsive Navigation ```html ``` ### Grid Layout ```html
Item 1
Item 2
Item 3
Wide Item
Item 5
``` ## Common Patterns ### Centering Content ```html
Centered content
Centered content
Centered content
``` ### Truncating Text ```html

This text will be truncated with an ellipsis if it's too long

This text will be truncated after 3 lines with an ellipsis

``` ### Aspect Ratios ```html
``` ## Anti-Patterns ### ❌ Don't Use Inline Styles ```html
Content
Content
``` ### ❌ Don't Create Unnecessary Wrapper Divs ```html

Title

Title

``` ### ❌ Don't Overuse Arbitrary Values ```html
``` ### ❌ Don't Forget Mobile-First ```html
``` ## Related Skills - **tailwind-configuration**: Customizing Tailwind config and theme - **tailwind-components**: Building reusable component patterns - **tailwind-responsive-design**: Advanced responsive design techniques - **tailwind-performance**: Optimizing Tailwind for production