Compétences tailwind-patterns
🎨

tailwind-patterns

Sûr

Build Modern Tailwind v4 UIs with CSS-First Architecture

Également disponible depuis: 0xDarkMatter,0xDarkMatter

Stop struggling with Tailwind configuration and responsive design. This skill provides CSS-first patterns, container query mastery, and modern design token architecture for building scalable UIs with Tailwind CSS v4.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez Ă  utiliser

Tester

Utilisation de "tailwind-patterns". Create a dark mode card component with container queries

RĂ©sultat attendu:

  • .card { @container; background: white; padding: var(--spacing-lg); }
  • .dark .card { background: zinc-900; }
  • @sm { .card-content { grid-template-columns: 1fr 1fr; } }

Utilisation de "tailwind-patterns". Set up design tokens with OKLCH colors

RĂ©sultat attendu:

  • @theme {
  • --color-primary: oklch(0.7 0.15 250);
  • --color-surface: oklch(0.98 0 0);
  • --spacing-md: 1rem;
  • }

Audit de sécurité

Sûr
v1 • 2/25/2026

Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.

1
Fichiers analysés
276
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Migrate Tailwind v3 to v4

Developers upgrading from Tailwind v3 to v4 who need to replace JavaScript config with CSS-first @theme directive

Build responsive component libraries

UI engineers creating reusable components that adapt to their container size rather than viewport breakpoints

Implement design token systems

Teams establishing semantic color, spacing, and typography scales using OKLCH and CSS variables

Essayez ces prompts

Basic theme configuration 
Create a Tailwind v4 @theme configuration with a primary brand color, spacing scale, and font stack for a [project type]
Container query component 
Design a responsive [component type] using container queries that adapts from narrow to wide containers
Dark mode implementation 
Implement dark mode for a [page type] using [class/media/selector] strategy with proper color tokens
Modern layout pattern 
Create a [layout type] using [flexbox/grid] with responsive breakpoints and asymmetric Bento-style sections

Bonnes pratiques

  • Use CSS-first @theme directive in Tailwind v4 instead of tailwind.config.js for better performance and native CSS variable support
  • Prefer container queries (@container) for component-level responsive design over viewport breakpoints for reusable, context-independent components
  • Organize design tokens in three layers: primitive colors (raw values), semantic tokens (primary, surface), and component tokens (button-bg)
  • Use mobile-first approach by writing base styles without prefixes, then adding sm:, md:, lg: overrides for larger screens
  • Extract components when class combinations repeat 3+ times or when complex state variants are needed

Éviter

  • Avoid arbitrary values everywhere - use design system scale values for consistency instead of hardcoded numbers like w-[327px]
  • Do not use !important to override styles - fix specificity issues through proper component structure and CSS layering
  • Avoid inline style attributes - use Tailwind utility classes instead to maintain design system consistency
  • Do not mix v3 JavaScript config with v4 CSS-first patterns - migrate fully to @theme directive and CSS-based configuration
  • Avoid heavy use of @apply directive - prefer React/Vue components for dynamic behavior or pure CSS components for static patterns

Foire aux questions

What is the main difference between Tailwind v3 and v4?
Tailwind v4 uses CSS-first configuration with the @theme directive instead of JavaScript-based tailwind.config.js. It also includes the Oxide engine written in Rust for 10x faster compilation and native support for modern CSS features like container queries and CSS nesting.
When should I use container queries instead of viewport breakpoints?
Use container queries (@container) for component-level responsive design when building reusable components that should adapt to their parent container size. Use viewport breakpoints (md:, lg:) for page-level layouts that respond to screen size.
What is OKLCH and why should I use it for colors?
OKLCH is a perceptually uniform color format that provides more consistent and predictable color adjustments than HSL or RGB. It is recommended for design tokens because it ensures uniform lightness and better color harmony across your design system.
Do I need a tailwind.config.js file in Tailwind v4?
No, the tailwind.config.js file is optional in v4. You can configure all design tokens using the CSS-based @theme directive directly in your CSS files. The JavaScript config is only needed for advanced plugin configurations or legacy v3 migration.
Should I use @apply or extract components?
Prefer extracting components using React/Vue/svelte for dynamic components with JavaScript behavior. Use @apply sparingly for static CSS-only components when you need to reuse class combinations without framework overhead.
How do I implement dark mode in Tailwind v4?
Configure dark mode using the class strategy (manual toggle with .dark class), media strategy (follows system preference), or custom selector strategy in v4. Apply dark variants with dark: prefix like dark:bg-zinc-900 dark:text-white.

Détails du développeur

Auteur

sickn33

Licence

MIT

DĂ©pĂ´t

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-patterns

RĂ©f

main

Structure de fichiers

đź“„ SKILL.md