Claude Code Plugins

Community-maintained marketplace

Feedback

tailwind-4

@tirtza-weinfeld/hippocampx
0
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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

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