Configuración del editor

Soporte de sintaxis

Tailwind CSS usa sintaxis CSS personalizada como @theme, @variant, y @source, y en algunos editores esto puede generar advertencias o errores donde estas reglas no se reconocen.

Si usas VS Code, nuestro plugin oficial Tailwind CSS IntelliSense incluye un modo de lenguaje dedicado de Tailwind CSS que tiene soporte para todas las @-rules y funciones personalizadas que Tailwind utiliza.

En algunos casos, es posible que debas deshabilitar el linting/validaciones nativas de CSS si tu editor es muy estricto con la sintaxis que espera en tus archivos CSS.

IntelliSense para VS Code

La extensión oficial Tailwind CSS IntelliSense para Visual Studio Code mejora la experiencia de desarrollo de Tailwind al proporcionar a los usuarios funciones avanzadas como autocompletado, resaltado de sintaxis y linting.

• Autocompletado — proporciona sugerencias inteligentes para clases de utilidad, así como funciones y directivas de CSS.
• Linting — resalta errores y posibles bugs tanto en tu CSS como en tu marcado.
• Vistas previas al pasar el cursor (Hover) — revela el CSS completo para las clases de utilidad cuando pasas el cursor sobre ellas.
• Resaltado de sintaxis — para que las características de Tailwind que usan sintaxis CSS personalizada se resalten correctamente.

Echa un vistazo al proyecto en GitHub para obtener más información, o agrégalo a Visual Studio Code para empezar ahora.

Ordenación de clases con Prettier

Mantenemos un plugin oficial de Prettier para Tailwind CSS que ordena automáticamente tus clases siguiendo nuestro orden de clases recomendado.

Funciona perfectamente con configuraciones personalizadas de Tailwind, y como es solo un plugin de Prettier, funciona en cualquier lugar donde Prettier funcione, incluyendo todos los editores e IDE populares y, por supuesto, en la línea de comandos.

<!-- Antes -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button>
<!-- Después -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

Echa un vistazo al plugin en GitHub para obtener más información y empezar.

IDEs de JetBrains

Los IDEs de JetBrains como WebStorm, PhpStorm y otros incluyen soporte para completados inteligentes de Tailwind CSS en tu HTML.

Aprende más sobre el soporte de Tailwind CSS en los IDEs de JetBrains →