tailwind-css
Estilizar componentes de interface com Tailwind CSS
Criar interfaces de usuário responsivas e acessíveis requer conhecimento profundo de classes utilitárias e padrões de design. Esta habilidade oferece orientação especializada para layouts mobile-first, suporte a modo escuro e estilização de componentes usando as convenções do Tailwind CSS.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "tailwind-css". Estilizar um componente de cartão KPI com design responsivo mobile-first e suporte a modo escuro
Résultat attendu:
- Criar estilos base para viewport mobile (375px)
- Adicionar breakpoints sm:, md:, lg: para telas maiores
- Incluir variantes de cores dark: para modo escuro
- Adicionar estados focus-visible para acessibilidade
- Garantir taxas de contraste de cores de 4.5:1
Utilisation de "tailwind-css". Criar um grid de dashboard que se adapta de mobile para desktop
Résultat attendu:
- Começar com grid-cols-1 para estilos base mobile
- Aplicar sm:grid-cols-2 para breakpoint de tablet
- Usar md:grid-cols-3 para layouts de desktop
- Adicionar lg:grid-cols-4 para telas grandes
- Incluir espaçamento consistente gap-4 entre itens
Utilisation de "tailwind-css". Configurar um tema de cores personalizado com nomes semânticos
Résultat attendu:
- Definir paletas de cores primary, secondary, accent
- Criar tonalidades de cores de 50 a 900 para cada cor semântica
- Estender o tema padrão em vez de substituí-lo
- Suportar variáveis CSS para temas dinâmicos
- Habilitar darkMode: 'class' para alternância manual
Audit de sécurité
SûrPure documentation skill with no executable code, no file access, no network operations, and no sensitive capabilities. Contains only Tailwind CSS guidance and best practices. All 102 static findings are false positives caused by the analyzer misinterpreting JSON metadata as cryptographic algorithms and Markdown code formatting (backticks) as shell command execution.
Facteurs de risque
🌐 Accès réseau (5)
📁 Accès au système de fichiers (1)
⚙️ Commandes externes (56)
Score de qualité
Ce que vous pouvez construire
Estilização de Componentes
Estilizar componentes React com classes utilitárias para botões, formulários, cartões e layouts
Layouts Responsivos
Criar dashboards e grids responsivos mobile-first que se adaptam entre breakpoints
Suporte a Modo Escuro
Implementar troca de temas com variantes de modo escuro e configuração de esquema de cores
Essayez ces prompts
Estilizar um componente de botão com variantes primária e secundária usando Tailwind CSS. Incluir estados hover, anéis de foco e suporte para tamanhos pequeno e médio.
Criar um layout de grid responsivo que mostra 1 coluna no mobile, 2 no tablet, 3 no desktop e 4 em telas grandes usando breakpoints do Tailwind CSS.
Adicionar suporte a modo escuro a um componente de cartão existente. Incluir taxas de contraste de cores adequadas para temas claros e escuros.
Configurar um tema Tailwind personalizado com nomes de cores semânticas (primary, secondary, accent) e escala de espaçamento personalizada em tailwind.config.ts.
Bonnes pratiques
- Começar com estilos mobile, depois melhorar com breakpoints para telas maiores
- Usar nomes de cores semânticas (primary, secondary) em vez de valores hardcoded
- Sempre incluir focus-visible ou focus:ring para elementos interativos
- Testar layouts nos breakpoints padrão: 375px, 768px, 1024px, 1440px
Éviter
- Substituir todo o tema em vez de estendê-lo em tailwind.config.ts
- Usar CSS personalizado quando classes utilitárias seriam suficientes
- Pular estados de foco em elementos interativos
- Hardcoded de valores de cor em vez de usar variáveis de tema