Primeros Pasos, Configuración del Editor de Código

¿Por qué utilizar un editor de código?

Los editores de código pueden mejorar la experiencia del programador mediante distintas funcionalidades como autocompletado, exploración del proyecto, reporte de errores, etc.

Soporte para sintaxis de Tailwind CSS

Tailwind utiliza muchas reglas de css como @tailwind, @apply y @screen. En mucho editores esto puede mostrarse como alertas o errores cuando la sintaxis no es reconocida.

Para solucionar este problema podemos instalar un plugin que permita a nuestro editor soportar PostCSS en lugar de solo CSS.

Si estas utilizando Visual Studio Code, puede utilizar el Tailwind CSS IntelliSense que incluye el soporte para las sintaxis de todas las reglas que existen en Tailwind CSS.

Intellisense para VS Code

El plugin oficial Tailwind CSS IntelliSense mejora la experiencia al proveer características avanzadas como el autocompletado y el linting.

Característica Descripción
Autocompletado Provee sugerencias para nombres de clases, así como funciones y directivas de CSS.
Linting Potenciales errores y fallos que se encuentran en las sintaxis de cSS.
Previsualización Muestra el CSS correspondiente para una clase del Tailwind CSS al posicionar el cursor sobre ella.
Coloreado Provee combinaciones de colores específicos a los elementos de la sintaxis.

Ordenamiento de clases con Prettier

El Plugin de formateo con Prettier de Tailwind CSS organiza las clases según las convenciones provistas por Tailwind CSS.

Plugins de JetBrains

Los ides de JetBrains como WebStorm, PhpStorm y otros, incluyen soporte para Tailwind CSS dentro del código HTML, para mas información consulta la Página de información de soporte de Tailwind CSS.