{/* p=16px, mt=8px, px=24px, py=12px */} // Width / height

{/* arbitrary values */} // Margin auto (centering)

``` ### Flexbox ```tsx

// Flex children

{/* grow, allow shrinking below content size */}

{/* fixed width */}

{/* don't shrink */} ``` ### Grid ```tsx

{/* arbitrary template */}

{/* Spanning */}

``` ### Typography ```tsx

// Truncate long text
{/* single line ellipsis /}
{/ clamp to 3 lines /} ``` --- ## Responsive Design Tailwind is mobile-first — unprefixed utilities apply to all sizes, prefixes override at that breakpoint and up. ```tsx // Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
// Hide/show
{/ hidden on mobile, visible md+ /}
{/ visible on mobile, hidden md+ */} // Text size changes per breakpoint
``` --- ## Dark Mode ```tsx // tailwind.config — use 'class' strategy (toggle via class on ) darkMode: 'class' // Next.js — use next-themes // In components
``` --- ## Custom Theme Config ```js // tailwind.config.ts import type { Config } from "tailwindcss" export default { content: ["./src/**/.{ts,tsx}"], darkMode: "class", theme: { extend: { colors: { brand: { 50: "#eff6ff", 500: "#3b82f6", 900: "#1e3a5f", }, // CSS variable-based (works with shadcn/ui) background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, }, fontFamily: { sans: ["var(--font-inter)", "sans-serif"], mono: ["var(--font-mono)", "monospace"], }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", }, keyframes: { "fade-in": { from: { opacity: "0", transform: "translateY(4px)" }, to: { opacity: "1", transform: "translateY(0)" }, }, "spin-slow": { to: { transform: "rotate(360deg)" }, }, }, animation: { "fade-in": "fade-in 0.2s ease-out", "spin-slow": "spin-slow 3s linear infinite", }, }, }, } satisfies Config ``` --- ## Animations and Transitions ```tsx // Transitions — apply to base element, variants add what changes

``` ### Input ```tsx ``` ### Badge ```tsx const badgeVariants = cva( "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", { variants: { variant: { default: "bg-gray-100 text-gray-800", success: "bg-green-100 text-green-800", warning: "bg-yellow-100 text-yellow-800", error: "bg-red-100 text-red-800", info: "bg-blue-100 text-blue-800", }, }, defaultVariants: { variant: "default" }, }, ) ``` ### Modal overlay ```tsx {/ Backdrop /}
{/ Panel /}
...
``` --- ## Tailwind v4 (New in 2025) ```css / No tailwind.config — configure in CSS / @import "tailwindcss"; @theme { --color-brand-500: #3b82f6; --font-sans: "Inter", sans-serif; --radius-lg: 0.75rem; } / Dark mode via media query by default (no class strategy needed) / / Use @variant dark { ... } for custom dark styles / ``` v4 changes: config moves to CSS `@theme`, faster build, no PostCSS required, native cascade layers. --- ## Red Flags - String template literals for conditional classes — `` `bg-${color} p-4` `` generates class names at runtime that Tailwind's static scanner never sees and therefore never includes in the output CSS; use only complete class names from the source, with `cn()` for conditions - Conflicting utilities without `tailwind-merge` — `className="px-4 px-6"` applies both; the last rule in the stylesheet wins (not the last in the string), which is unpredictable; `twMerge` resolves conflicts correctly by keeping only the last conflicting utility - Repeating variant logic in `if/else` strings — `className={isActive ? "bg-blue-600 text-white rounded-lg px-4" : "bg-gray-100 text-gray-900 rounded-lg px-4"}` duplicates base classes; use `cva` to declare base + variant styles separately - Arbitrary values that are repeated — `w-[340px]` appearing in five components belongs in `theme.extend` as a named token; arbitrary values are for one-offs only - Missing `dark:` variants on color utilities — adding `bg-white text-gray-900` without corresponding `dark:bg-gray-900 dark:text-gray-100` makes dark mode look broken; pair every color with its dark-mode variant at the same time - No `focus-visible:ring` on interactive elements — keyboard users navigating with Tab have no visible indicator when focus styles are absent; every button and link needs a `focus-visible:ring-` class for WCAG AA compliance - Importing Tailwind classes from JS variables — storing class names in a variable and spreading them defeats the static content scanner; Tailwind purges any class it cannot find as a complete string in the source at build time ## Checklist - [ ] `cn()` used instead of string concatenation for conditional classes - [ ] `cva` used for components with multiple variants (not `if/else` strings) - [ ] Responsive classes ordered mobile-first (base → sm: → md: → lg:) - [ ] `group` / `peer` used for parent/sibling state instead of JS state - [ ] `dark:` variants added alongside every color utility - [ ] `transition-colors` / `transition-all` on interactive elements - [ ] `focus-visible:ring` on all interactive elements for keyboard accessibility - [ ] Arbitrary values (`w-[340px]`) used sparingly — extend theme for repeated values - [ ] `disabled:` variants on form elements to style disabled state --- Source attribution: kid-sid Original project: https://github.com/kid-sid/codex-spellbook/blob/c8c7cac59c0da19cadc52a9b211dd497e1a0b710/skills/tailwind/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2026 Sidhartha Mohanty Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: kid-sid Original project: https://github.com/kid-sid/codex-spellbook/blob/c8c7cac59c0da19cadc52a9b211dd497e1a0b710/skills/tailwind/SKILL.md Attribution basis: Source repository record Fields of work: Design, Development & Engineering Roles: Frontend Developer, Product Designer, UX Designer Specialties: Cross Platform, Frontend Tools: Tool not specified Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: 029bea61edd6b9ed875a8ddc8375d0ce399d0e736b1c90ff855a72514ecc6515