Tailwind 4

Tailwind CSS 4.1+ patterns. Use when styling components, responsive design, container queries, masks, shadows, or animations. (project)

majiayu000 Updated 567 repo stars

File contents

Tailwind 4.1+

Setup

@import "tailwindcss";

Required Reading

Before writing any @theme or @utility → READ utilities.md and examples/*.css

Avoid → Use

  • tailwind.config.js → @theme in CSS
  • @apply → @utility or raw CSS
  • dark:bg-* per element → semantic tokens (see patterns.md)
  • group class → in-* variant (see variants.md)

Patterns

  • Dark mode: :root/.dark + @theme inline → patterns.md
  • Variants: in-*, has-*, nth-*, negation → variants.md
  • Container queries: @container, @sm:, @md: → variants.md
  • Entry animation: starting: variant → patterns.md
  • Masks: mask-b-from-*, mask-radial-* → patterns.md

majiayu000/claude-skill-registry-data/tree/main/design/tailwind-4 commit bd42aa2740

Frequently asked questions

npx skillmds@latest add majiayu000/tailwind-4-2