Como dice el dicho “lo bueno viene en envase pequeño” y Tailwind no es la excepción, gracias al enfoque de Atomic CSS con el que fue creado, cada clase que brinda este framework le da al desarrollador una idea clara sobre cuál es su propósito, por lo que es fácil familiarizarse con su vocabulario en poco tiempo. Además, debido a que cada clase cumple una función en específico la construcción de componentes es rápida y altamente personalizable.
¿Tailwind es CSS en línea disfrazado? 🕵️♂️
Sí, también me pregunté lo mismo cuando empecé a usar Tailwind, por qué simplemente no usar CSS o agrupar los estilos que necesitamos en una clase, y la respuesta la tenemos en las utility classes que son la razón por la cual Tailwind se puede adaptar a cualquier proyecto.
Las utility classes no son más que clases predefinidas que realizan una función determinada, sin embargo, esto va mucho más allá de solo encapsular propiedades CSS en clases, Tailwind también tiene responsive utilities para crear interfaces que se adapten a cualquier dispositivo y state variants que, como su nombre lo indica, son “estados” que puede tener un elemento y, por lo tanto, modificar la clase como por ejemplo una pseudoclase, un pseudoelemento o ¡hasta un selector de atributo! Para entender mejor esto, usemos una porción del ejemplo que nos brinda Tailwind en su página oficial:
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<blockquote class="pt-6 md:p-8 text-center md:text-left space-y-4">
<!-- ... -->
</blockquote>
</figure>
En el ejemplo anterior podemos ver las clases p-8 md:p-0 lo que significa que el elemento figure tendrá un padding de 32px por defecto, ya que Tailwind usa la medida de 4px como unidad de espaciado.
Por otro lado, también vemos la responsive utility md, la cual hace referencia a uno de los breakpoints que Tailwind tiene por defecto, como podemos apreciar en la siguiente imagen, por lo que md:p-0 se traduce como “A partir de 768px quitale el padding”. Además de todo esto, vemos que Tailwind nos brinda una utilidad para estilos en dark mode y sí, sé lo que te estás preguntando, puedes combinar todas las utilidades que necesites para crear situaciones más especificas si lo requieres. Por ejemplo, podrías agregar algo como dark:lg:focus:text-orange-800. En la próxima sección hablaremos de cómo es posible personalizar Tailwind a tu medida.
Las clases no coinciden con mi sistema de diseño 😢
Por si no fuera poco, no importa si necesitas una paleta de colores distinta a la que te brinda Tailwind por defecto o tal vez usas otros breakpoints, tamaños de fuente, lo que te haga falta Tailwind lo tendrá. Aparte de la gran cantidad de clases que nos brinda, podemos elegir entre extender las clases (extends) o agregar una configuración basada en nuestro tema (theme). Para personalizar y extender Tailwind solo necesitamos agregar las configuraciones necesarias en el archivo tailwind.config.js. En el siguiente ejemplo podemos ver una porción de la configuración que usamos:
colors: Como su nombre dice vamos a agregar nuevos colores, sin embargo, si los agregamos hay dos cosas que observar.- Al no encontrarse dentro de la propiedad
extendseliminará todos los colores por defecto y solo estarán disponibles los colores definidos en el archivo de configuración. - Podemos agregar valores con un mismo prefijo separando el prefijo del valor, en este caso tendremos disponibles los colores
ed-blue-100,ed-blue-200,ed-blue-300y así sucesivamente.
- Al no encontrarse dentro de la propiedad
screens: Esta propiedad hace referencia a los breakpoints disponibles, a diferencia de la anterior configuración, esta se encuentra dentro de la propiedad extends por lo que los nuevos breakpoints2xly3xlse sumarán a los breakpoints por defecto antes vistos.
module.exports = {
theme: {
colors: {
'ed-blue': {
50: '#f0f8ff',
100: '#e1f1fd',
200: '#a6d6f9',
300: '#88c8f7',
400: '#61b7f4',
500: '#1292ee',
600: '#0f80d1',
700: '#0c6cb1',
800: '#084977',
900: '#192E3d'
}
},
extend: {
screens: {
'2xl': '1440px',
'3xl': '1536px',
}
}
}
}
¿Puedo agrupar las clases de Tailwind? 🤔
La repuesta es simple, sí, la verdadera pregunta es ¿cuándo agrupar las clases en Tailwind?, y es aquí donde entran los componentes, pero no sin antes hacer mención a la directiva @apply que Tailwind nos brinda para crear una “clase padre” que contenga PATRONES de utilidad REPETIDOS, y es por esta misma razón que hablaremos de componentes y no de dicha directiva, ya que de por sí los componentes son PATRONES REPETITIVOS, por lo que escribir clases relativamente largas no es un problema debido a que solo tendremos que modificar un solo archivo en caso se quiera actualizar el diseño de un componente.
A continuación, veremos una comparativa entre @apply y el caso cuando se usa un enfoque basado en componentes.
Proyecto sin componentes:
Proyecto con React JS:
Como podemos ver en ambos casos obtenemos el mismo resultado y lo más importante, son reutilizables por lo que solo definimos las clases una vez y lo usamos mil veces. Donde realmente varía la forma en cómo agrupamos las clases es en el enfoque y las tecnologías complementarias que se usan en el proyecto.
El archivo CSS final debe ser muy pesado
Si estás preocupado porque tendrás un archivo de estilos muy pesado y con clases que nunca usaste en tu proyecto, nuevamente Tailwind tiene la solución y es que se creó pensando también en el rendimiento, por lo que creara el archivo más pequeño posible, para esto solo extrae las clases que se han usado a lo largo del proyecto.
¿Adiós CSS, hola Tailwind?
No te despidas aún, que como todo en este mundo del desarrollo, ninguna tecnología mata a otra y Tailwind ha venido para mejorar nuestra experiencia. Además, si bien Tailwind posee un gran abanico clases, existirán situaciones donde tengamos que crear clases muy personalizadas para casos específicos, por esto y porque si no conocemos como funcionan las propiedades CSS no podremos sacarle el mayor provecho a este poderoso Framework.
¿Dónde puedes aprender Tailwind?
En EDteam 😎, si aún no sabes Tailwind o quieres reforzar tus conocimientos en este Framework tienes que tomar nuestro curso: ed.team/cursos/tailwind. Las primeras clases son gratis para que compruebes porque en español nadie explica mejor que EDteam.
