¿Cómo se crean los componentes en Tailwind CSS?
Tradicionalmente cuando se crea un bloque (componente) de html, escribimos la definición en html y en una hoja de estilos el CSS.
Cuando utilizamos Tailwind CSS, el estilo lo aplicamos directamente a la etiqueta utilizando clases existentes.
Crear un nuevo proyecto en blanco en Tailwind CSS
Como ya hemos mencionado, se puede utilizar TailwindCSS con HTML directamente. Este proceso lo tendrás que repetir para ir avanzando en cada una de las lecciones.
-
Dentro de un nuevo directorio crea un archivo index.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Utility First</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-500 min-h-screen flex items-center justify-around" > <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4" > <div class="shrink-1"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Logo_nike_principal.jpg" alt="Nike" /> </div> <div class="shrink-0"> <div class="text-xl font-medium text-black">Nike</div> <p class="text-slate-500">Descripción de la app de Nike</p> </div> </div> </body> </html> -
Arrancamos nuestro proyecto dentro del directorio utilizando live-server.
npx live-server . -
Abre la dirección url de live-server y podrás ver el componente que acabamos de crear.
¿Es Tailwind CSS un antipatrón y por qué usarlo tan malo entonces?
En el ejemplo hemos creado una tarjeta (card) con una combinación de utilities. Esto nos permite tener el componente completo sin escribir una sola línea de CSS.
Esto va en contra de todo lo que estamos acostumbrados, puede considerarse como lo peor, y es verdad. Cuando utilizamos por primera ocasión este enfoque nos puede parecer terrible y tiene todo sentido que así lo consideremos.
Una vez que se construye algo de esta manera, uno empieza a darse cuenta de la importancia y de los beneficios como:
1. Evitar gastar el tiempo creando clases
No mas tiempo invertido en intentar describir un elemento con una clase como sidebar-inner-wrapper, solo para darnos cuenta que el único propósito de esta clase es alinear el contenido.
2. El CSS deja de crecer
Utilizando el enfoque tradicional, el CSS de tu aplicación irá creciendo cada vez mas. Al enfocarte en el uso de utilidades (utilities), solo tienes que echar mano de las ya existentes.
3. Cambios mas seguros
El uso de CSS aplica en un enfoque global y esto deriva en que incluso un cambio pequeño puede afectar muchas partes de la aplicación. Cuando usas utilities, solo te enfocas en la parte en donde estas utilizándolas, sin que esto tenga un efecto secundario en otra parte.
¿Por qué no utilizar solo Inline Styles?
Una reacción común a este enfoque es el de questionarse a si mismo… ¿Por qué no solo entonces utilizar inline-styles?
Pero al utilizar clases se tienen algunas ventajas sobre los inline styles:
Diseñar con restricciones
Cuando se utilizan utilities, se esta echando mano de un sistema de diseño predefinido que hace mucho mas sencillo construir interfaces de usuario consistentes.
Diseño diseño responsivo
No es posible utilizar media queries en los inline styles pero con las utilities de Tailwind se pueden construir estas reglas de manera muy sencilla.
Hover, focus y otros estados
No se puede hacer referencia a este tipo de estados como hover y focus dentro de los inline styles, pero con las variantes de estado (state variants), Tailwind permite personalizar estos valores directamente sobre la etiqueta.
Una de las mayores preocupaciones es la constante repetición del código. La solución propuesta para este caso es echar mano de frameworks que utilicen componentes y/o partials.