Skip to content

2002-tailwindcss.md

Latest commit

 

History

History
57 lines (45 loc) · 1.83 KB

2002-tailwindcss.md

File metadata and controls

57 lines (45 loc) · 1.83 KB
description Apply Tailwind utilities when styling to keep layouts simple and uniform
globs src/**/*.{tsx,css}
alwaysApply false

Tailwind CSS Rules

blefnk/rules 1.0.0

Context

  • For styling with Tailwind CSS v4
  • Emphasizes utility classes for consistency

Requirements

  • Maintain consistent spacing (e.g., p-4, m-2, space-y-4).
  • Combine conditional classes with cn().
  • Use only custom colors defined in globals.css.
  • Ensure dark mode support via .dark: variants.

Examples

import { cn } from "~/lib/utils";

export function ExampleBox({ isActive }: { isActive: boolean }) { return ( <div className={cn("p-4 rounded-md", isActive ? "bg-blue-500" : "")}> Content ); }

Inline styled box

Tailwind v4 Updates

  • Config: tailwind.config.ts deprecated; now configure in globals.css with @import "tailwindcss".
  • PostCSS: Plugin moved to @tailwindcss/postcss.
  • Utility Renames:
    • shadow-sm → shadow-xs; shadow → shadow-sm; similar for blur, drop-shadow.
    • outline-none → outline-hidden.
    • ring defaults to 1px; use ring-3 for old 3px behavior.
  • Removed Utilities: bg-opacity-*, text-opacity-*, flex-shrink-*, flex-grow-* → replaced by new patterns (bg-black/50, shrink-*, grow-*, etc.).
  • Placeholder Text: Now 50% of current color, not fixed gray.
  • Buttons: Default cursor: default.
  • Border Color: Defaults to currentColor.
  • @layer: @layer utilities/components replaced by @utility.
  • Variant Stacking: Applied left to right (e.g., .hover:focus:bg-red-500).
  • space-y-*: Uses new selector, may affect inline layouts.
  • Theming: Use var(--color-...) instead of theme() in CSS.