Tailwind
Tailwind CSS
Utilizamos una librería para los estilos que se llama Tailwind. Es una librería de clases de utilidad, que proporciona clases individuales para cada estilo que queramos aplicar y que luego en los componentes o en el HTML enumeramos todas las que necesitemos.
Al principio puede parecer raro o difícil de usar pero una vez te acostumbras es más eficiente que ir escribiendo CSS a mano todo el rato.
Toda la documentación la podemos encontrar en: https://tailwindcss.com/
Tailwind UI
También hemos contratado un servicio, de los creadores de Tailwind, donde te proporcionan snnipets HTML de código ya preparados con todas sus clases para hacer una serie de diseños típicos.
Podemos elegir cualquiera de los diseños que hay en Tailwind UI y copiarlo a nuestro proyecto, adaptar lo que necesitemos cambiar sin problema y publicar.
Recomendamos explorar los diseños que hay y siempre que haya un punto de partida óptimo en esa web utilizarlo para facilitarnos el camino.
Para consultar los componentes que hay: https://tailwindui.com/components
Tailwind CSS IntelliSense
Es una extensión para vscode que recomendamos instalar. Es capaz de reconocer que estamos duplicando clases en el mismo elemento, o que estamos usando clases que no existen y avisarnos en el momento que las estamos escribiendo.
Para instalarla:
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Cheatsheets
Para consultar las clases que existen y qué significa cada una tenemos tres opciones muy buenas que nos pueden ayudar a utilizar más eficientemente las miles de clases que tiene Tailwind:
-
La cheatsheet de referencia por excelencia: https://nerdcave.com/tailwind-cheat-sheet
No podemos dejar de recomendarla como método estrella.
- Una cheatsheet más visual aunque menos actualizada: https://umeshmk.github.io/Tailwindcss-cheatsheet/
- La propia extensión de vscode que mencionábamos antes, que autocompleta y permite consultar clases poniendo el ratón encima de una concreta.