tailwind-css-v4-mastery
Domina Tailwind CSS V4 con guía potenciada por IA
Tailwind CSS V4 introduce cambios revolucionarios con su motor Oxide y configuración CSS-first. Esta habilidad proporciona orientación experta para navegar la migración, optimizar el rendimiento y construir sistemas de diseño modernos.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "tailwind-css-v4-mastery". Ayúdame a migrar mis utilidades de sombra v3 a v4
النتيجة المتوقعة:
- Migración de Sombras v3 → v4:
- • .shadow → .shadow-sm (sombra predeterminada reducida)
- • .shadow-sm → .shadow-xs (pequeño ahora es extra-pequeño)
- • .shadow-md → .shadow (mediano ahora es predeterminado)
- • Sin cambios para shadow-lg, shadow-xl, shadow-2xl
- Corrección rápida: Buscar/reemplazar en tus archivos:
- sed -i 's/\bshadow\b/shadow-sm/g' *.html
- sed -i 's/\bshadow-sm\b/shadow-xs/g' *.html
استخدام "tailwind-css-v4-mastery". Crear una configuración @theme para mis colores de marca
النتيجة المتوقعة:
- Añade esto a tu archivo CSS:
- @import "tailwindcss";
- @theme {
- --color-brand-primary: oklch(0.6 0.15 250);
- --color-brand-secondary: oklch(0.7 0.12 180);
- --color-brand-accent: oklch(0.8 0.2 45);
- }
- Uso: bg-brand-primary, text-brand-accent, etc.
استخدام "tailwind-css-v4-mastery". ¿Qué plugin de V4 debería usar con Vite?
النتيجة المتوقعة:
- Usa @tailwindcss/vite para mayor rendimiento:
- 1. npm install -D @tailwindcss/vite
- 2. Añadir a vite.config.ts:
- import tailwindcss from '@tailwindcss/vite';
- plugins: [react(), tailwindcss()]
- Mejora esperada: Compilaciones 10-100x más rápidas vs PostCSS
التدقيق الأمني
آمنThis is a documentation-only skill containing Tailwind CSS V4 guides and one benign migration shell script. The static analyzer generated 435 false positives by misinterpreting markdown backticks as shell execution, documentation URLs as network threats, and text patterns like 'md' as weak cryptography. All findings are false positives - no cryptographic code, no credential access, no exfiltration patterns, no malicious behavior exists. The migration script only performs standard file backup and sed operations for CSS migration purposes.
مشكلات منخفضة المخاطر (1)
عوامل الخطر
⚡ يحتوي على سكربتات (1)
🌐 الوصول إلى الشبكة (1)
📁 الوصول إلى نظام الملفات (1)
درجة الجودة
ماذا يمكنك بناءه
Migrar de Tailwind v3 a v4
Migración automatizada con detección de cambios disruptivos, actualización de utilidades y conversión de configuración de JavaScript a enfoque CSS-first.
Construir bibliotecas de componentes modernas
Crear sistemas de diseño escalables con variables CSS, soporte multi-tema y estilos con alcance de componentes usando la arquitectura de V4.
Optimizar el rendimiento de compilación
Lograr compilaciones 10-100x más rápidas con configuración del motor Oxide, selección de plugins y patrones de optimización CSS.
جرّب هذه الموجهات
Necesito migrar mi proyecto de Tailwind v3 a v4. ¿Puedes verificar qué cambios disruptivos afectan mi configuración actual? Uso extensivamente utilidades de sombras, esquinas redondeadas y opacidad.
Ayúdame a diseñar un sistema de componentes de botón en Tailwind V4 con variantes primario/secundario, tamaños y soporte para modo oscuro usando configuración @theme.
Mis compilaciones de Tailwind v4 tardan 2-3 segundos con PostCSS. ¿Cómo puedo optimizar esto? Uso Webpack en un proyecto Next.js.
Necesito soportar 5 temas de marca diferentes en nuestra aplicación empresarial. Muéstrame cómo configurar variables CSS y cambio de temas con atributos de datos en Tailwind V4.
أفضل الممارسات
- Siempre usa el prefijo -- en bloques @theme: --color-primary no color-primary
- Elige el plugin correcto para tu herramienta de compilación: @tailwindcss/vite para Vite, @tailwindcss/postcss para Webpack
- Prueba los colores de borde y anchos de anillo después de la migración - los valores predeterminados cambiaron significativamente
تجنب
- No conserves tailwind.config.js - V4 lo ignora completamente. Usa @theme en su lugar en CSS
- Evita definir paletas de colores completas - sobrescribe solo lo que necesitas de los valores predeterminados
- Nunca uses utilidades de opacidad - fueron eliminadas. Usa modificadores de color como bg-black/50 en su lugar