tailwind▌

Styling patterns and conventions for frontend applications. Contains 10 rules covering layout utilities, affordances, color schemes, responsive design, and className handling.

Modern utility-first CSS with CSS-native configuration and container queries. \n \n CSS-first configuration using @theme directives instead of JavaScript, powered by the Oxide engine for 10x faster compilation \n Native container queries ( @container , @sm: , @md: ) for component-level responsive design independent of viewport \n Comprehensive design token architecture using CSS variables for colors, spacing, typography, and semantic naming \n Mobile-first responsive breakpoints ( sm: , md: , lg

$22

Production-ready setup for Tailwind CSS v4 with shadcn/ui, dark mode, and CSS variable architecture. \n \n Four-step architecture: define CSS variables at root level with hsl() wrapper, map to Tailwind utilities via @theme inline , apply base styles, and enable automatic dark mode switching \n Vite plugin-based configuration (no PostCSS or tailwind.config.ts needed); requires @tailwindcss/vite and empty \"config\" in components.json \n Semantic color tokens for destructive, success, warning, and

$22

Styling guidelines for the Mastra Playground UI, containing 5 rules across 3 categories. Rules are prioritized by impact to guide automated refactoring and code generation. These rules ensure design system consistency, prevent token drift, and maintain component library integrity.

Utility-first CSS framework for rapid UI development with responsive design and dark mode support. \n \n Provides single-purpose utility classes for layout, spacing, typography, colors, and effects without writing custom CSS \n Includes mobile-first responsive breakpoints (sm, md, lg, xl, 2xl) and built-in dark mode with class or media strategy \n Supports framework integration with React, Next.js, Vue, Svelte, and others; includes official plugins for forms, typography, and aspect ratios \n Off

Tailwind v4 and shadcn/ui setup with CSS variables, dark mode, and semantic color theming. \n \n Automates dependency installation, Vite configuration with the Tailwind plugin, and shadcn/ui initialization \n Implements a mandatory four-step CSS architecture: root CSS variables, @theme inline mapping, base styles, and dark mode via class switching \n Includes pre-built theme provider component for dark mode toggling and persistent theme storage \n Provides troubleshooting guides for common v4 mi

Tailwind v4 with shadcn/ui using CSS variables and @theme inline pattern. \n \n Four-step architecture: define CSS variables at root, map to Tailwind utilities with @theme inline , apply base styles, automatic dark mode switching \n Prevents 8 documented errors including color mapping failures, dark mode conflicts, @apply breaking changes, and v3 migration gotchas \n Requires @tailwindcss/vite plugin (not PostCSS), empty Tailwind config in components.json, and ThemeProvider wrapper for theme tog

Compiles Tailwind CSS for Hyvä themes in Magento 2. Handles both production builds and development watch mode.