Guide des Effets Tailwind CSS v4.1

Référence complète pour l'application d'effets visuels, d'ombres, de filtres et de masques à l'aide des utilitaires Tailwind CSS v4.1.

déclencheurs:tailwind effectstailwind shadowsbackdrop blurtailwind maskglassmorphism tailwind

GitHub SKILL.md

Ce qu'elle fait\nCette compétence dote l'agent de la syntaxe précise et des modèles d'utilisation pour les effets visuels de Tailwind CSS v4.1. Elle permet la création d'interfaces utilisateur de haute fidélité avec des fonctionnalités CSS modernes directement via des classes utilitaires.\n\n## Quand l'utiliser\nActivez cette compétence lors du stylisage de composants nécessitant des traitements visuels complexes, tels que le glassmorphism, des ombres portées personnalisées, des filtres d'image ou des masques avancés.\n\n## Ce qui est inclus\n- Instructions : Guides d'utilisation détaillés pour les ombres de boîte (y compris les nouvelles ombres de couleur et internes v4.1), l'opacité, les filtres (flou, luminosité, etc.), les filtres de fond (backdrop filters) et les nouveaux utilitaires de masque v4.1.\n- Références : Inclut des liens vers des configurations plus approfondies pour les ombres, les filtres et l'opacité.\n\n## Agents compatibles\nTout agent assistant le développement frontend, spécifiquement ceux travaillant avec les piles Tailwind CSS et Next.js/React.

Étiquettes

#tailwindcss #css #frontend #ui-design #visual-effects #web-development

Pas encore audité

Cette compétence n'a pas encore été examinée par notre pipeline d'audit automatisé.

Informations

Dépôt: agents
Étoiles: 15

Plus de agents

SOLID Generic — TypeScript / Bun / Node.js

Directives SOLID optimisées pour les projets TypeScript/Bun/Node : fichiers compacts, interfaces séparées, JSDoc obligatoire, flux de travail et modèles axés sur la réutilisation pour maintenir la cohérence.

Astro i18n

Implémente et configure l'internationalisation native d'Astro : routage des locales, aides URL, hreflang du sitemap et organisation du contenu pour les sites multilingues.

Guide de mise à niveau Laravel 12 → 13

Chemin de mise à niveau guidé et checklist pour passer les applications Laravel 12 à Laravel 13 (PHP 8.3, mises à jour de dépendances, changements majeurs, migration des Attributs).

Plateforme iPadOS

Conseils et meilleures pratiques pour créer des applications optimisées pour l'iPad : vues fractionnées, raccourcis clavier, Stage Manager, multi-fenêtrage et mises en page adaptatives.

Optimiseur SEO Schema.org JSON-LD

Détecte, valide et génère le balisage structuré Schema.org JSON-LD pour améliorer la visibilité dans les moteurs de recherche.

Compétences similaires

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

Colorize — Strategic UI Color Introduction

Introduce purposeful color to monochromatic interfaces to improve hierarchy, meaning, and visual engagement while preserving accessibility.

DAUB UI

A drop-in CSS+JS component library with 70+ carefully designed components and 20 theme families for fast, consistent UI building.

dotLottie Web

Guidelines and patterns for implementing performant dotLottie/Lottie animations on the web (vanilla JS and React), including workers, state machines, and themin

React Context Setup

Automates guidance and code patterns for setting up React Context, providing step-by-step configuration and best-practice examples for frontend projects.

Angular Migration

Guides developers through migrating AngularJS (1.x) apps to modern Angular (2+), with hybrid ngUpgrade approaches, component/service conversions, DI strategies,