Configuración del editor

Soporte de sintaxis

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

Si estás utilizando VS Code, nuestro complemento oficial Tailwind CSS IntelliSense incluye un modo de lenguaje dedicado de Tailwind CSS que admite todas las at-rules y funciones personalizadas que utiliza Tailwind.

En algunos casos, es posible que debas deshabilitar el análisis/validación de CSS nativo si tu editor es muy estricto con la sintaxis que espera en tus archivos CSS.

Cursor

Cursor es un editor de código nativo de IA con características como autocompletado consciente del contexto y agentes de codificación integrados. Dado que admite extensiones de VS Code, todas las herramientas de Tailwind CSS con las que ya estás familiarizado funcionan de inmediato, incluida nuestra extensión oficial Tailwind CSS IntelliSense y el complemento Prettier para ordenar clases.

Conoce y descarga Cursor.

Zed

Zed es un editor de código rápido y moderno, diseñado desde cero para flujos de trabajo de desarrollo de vanguardia, incluida la edición agéntica con IA. Cuenta con soporte integrado para autocompletados de Tailwind CSS, análisis y vistas previas al pasar el mouse, sin necesidad de instalar y configurar una extensión por separado. También se integra estrechamente con Prettier, por lo que nuestro complemento Prettier oficial funciona a la perfección con Zed cuando está instalado.

Conoce Zed y obtén más información sobre cómo funciona con Tailwind 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 características avanzadas como autocompletado, resaltado de sintaxis y análisis.

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

Visita el proyecto en GitHub para obtener más información, o agrégalo a Visual Studio Code para comenzar ahora.

Clasificación de clases con Prettier

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

Funciona a la perfección con configuraciones personalizadas de Tailwind y, debido a que es solo un complemento de Prettier, funciona en cualquier lugar donde funcione Prettier, incluido cualquier editor e IDE popular 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">Enviar</button><!-- Después --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Enviar</button>

Visita el complemento en GitHub para obtener más información y comenzar.

IDEs de JetBrains

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

Más información sobre el soporte de Tailwind CSS en los IDE de JetBrains →