驴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.