Tailwind CSS es un Framework de CSS que principalmente brinda clases útiles para nuestros desarrollos web. En simples palabras cuenta con un conjunto de clases que nosotros podemos aprovechar en nuestros desarrollos web.
- La idea principal de Tailwind es permitirnos personalizar aún más nuestros sitios y que no se vean igual a otros sitios desarrollados con el framework.
- Podemos utilizar sus clases y crear diseños únicos.
- Nos permite hacer sitio web responsives.
- En mi opinión nos obliga a utilizar más nuestro cerebro 🏋, ya que si bien tiene todas las clases configuradas nosotros tenemos que contar con mayor conocimiento de CSS para diseñar nuestro sitio web.
- Tailwind está escrito en PostCSS y configurado en JavaScript, lo que significa que tienes todo el poder de un lenguaje de programación real a tu alcance.
Instalación y Configuración
<h3>Instalación</h3>La instalación de Tailwind CSS es muy sencillo. Si ya tenemos instalado Node.js sólo debemos de realizar los pasos siguientes.
-
Configurar un proyecto con
npm package.$ npm init -y -
Instalar los plugins que vamos a utilizar.
$ npm install tailwindcss autoprefixer postcss-cli
Con las herramientas a utilizar ya instaladas ahora debemos de inicializar todas las herramientas instaladas.
-
Generar un archivo de configuración para tailwind.
# Archivo de configuración vacío $ npx tailwindcss init # Archivo de configuración completo $ npx tailwindcss init tailwind.config.full.js --full -
Crear un archivo de configuración para PostCSS.
$ touch postcss.config.js -
Al archivo de configuración de PostCSS añadir los
requirenecesarios para utilizar los módulos instalados.module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ], }; -
Siguiendo la documentación oficial de Tailwind CSS añadimos las siguientes líneas a un archivo
.css, recuerden que para ahondar en los detalles de la configuración siempre es bueno referirse a la documentación oficial.@tailwind base; @tailwind components; @tailwind utilities; -
Ya para finalizar agregamos el script que nos va a permitir compilar nuestro archivo de PostCSS con Tailwind a la versión final. En este script tenemos que indicar en que ruta se encuentra el archivo de PostCSS y en donde queremos generar el archivo final.
"scripts": { "build": "postcss css/tailwind.css -o public/css/styles.css" }, -
Ejecutamos nuestro script para generar el CSS final.
$ npm run build
Este tipo de instalación es muy recomendable si una de las cosas que deseamos hacer es personalizar Tailwind, ¿a qué me refiero con esto? Pues a que queramos cambiar los puntos de quiebre, los tipos de colores, etc.
Pero si lo que desamos es simplemente probar Tailwind y ponernos con las manos a la obra podemos hacer uso del CDN.
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Este CDN es el que se encuentra disponible en la documentación oficial a la hora de la creación de este artículo, por eso recomiendo encarecidamente siempre revisar la documentación oficial.
Conceptos Básicos
<h3>Directivas</h3>Las directivas son instrucciones que permiten que Tailwind agregue estilos definidos a nuestro archivo de CSS, lo cual nos permite utilizar las clases propias de este framework para dar estilos a nuestros elementos HTML.
@tailwind base→ Elimina los estilos por defecto de todos los elementos.@tailwind components→ Implementa las clases propias de los componentes incluidos.@tailwind utilities→ Implementa las clases que corresponden a la utilidad del framework.@tailwind screens→ Controla dónde es que Tailwind pondrá las variaciones responsivas de cada utilidad, esta directiva se puede omitir, si es ese el caso Tailwind añadirá estas clases al final del CSS final.
En el archivo que creamos para la configuración de Tailwind es donde podremos especificar los temas, las variaciones y los plugins que vamos a incluir.
La configuración de este archivo sugerida por Tailwind CSS es la siguiente.
module.exports = {
important: true,
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
extend: {
colors: {
cyan: '#9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}
}
En la sección theme definimos los aspectos relacionados con el diseño visual de nuestro sitio. La sección de variants nos permite controlar el comportamiento de las utilidades core, como responsive variants y pseudo-class variants.
Utilerías
<h3>Contenedor</h3>Como otros frameworks de CSS tenemos disponible una clase contenedora que nos permite indicar el ancho máximo de nuestro documento.
<div class="container"></div>
Por defecto container toma el 100% del ancho de nuestra página.
Los elementos que pueden ser afectados por los colores, o sea que pueden cambiar de color son:
-
Fondo.
<h1 class="bg-yellow-500">Hello World!</h1> -
Texto.
<h1 class="text-white">Hello World!</h1> -
Bordes.
<input class="border border-blue-500" type="text" placeholder="Lorem impusm"> -
Placeholder.
<input class="placeholder-green-500" type="text" placeholder="Lorem impusm">
Taildwind por default tiene valores ya predefinidos, para conocerlos tenemos que generar el archivo de configuración completo, para hacer esto es necesario utilizar el segundo comando especificado en la sección de configuración.
<h3>Dimensiones y Espacios</h3>Tailwind utiliza un sistema de espaciado predeterminado. Estos valores los podemos encontrar en el archivo de configuración en el apartado de spacing. Las propiedades que pueden controlar las dimensiones o espacios son:
-
Height.
<h1 class="h-32">Hello World!</h1> -
Width.
<h1 class="w-1/4">Hello World!</h1> -
Margin
<h1 class="ml-8 mt-16 mb-5">Hello World!</h1> -
Padding.
<h1 class="pt-8 pl-4">Hello World!</h1>
Para el caso de maring y padding podemos trabajar con ellos como si los trataramos en el eje de las x y en el eje y.
<h1 class="my-8 mx-auto">Hello World!</h1>
En todas las clases que son parte de las utilerías de Tailwind se pueden aplicar los puntos de quiebre, lo que ayuda a hacer nuestras interfaces adaptables a diferentes dispositivos.
Tailwind maneja cuatro puntos de quiebre por defecto, los cuales abarcan las resoluciones de los dispositivos más comunes.
/* Small (sm) */
@media (min-width: 640px) { }
/* Medium (md) */
@media (min-width: 768px) { }
/* Large (lg) */
@media (min-width: 1024px) { }
/* Extra Large (xl) */
@media (min-width: 1280px) { }
Tailwind está diseñado para ser mobile first por lo tanto no necesitamos usar ningún prefijo para las pantallas pequeñas.
<!-- Será rojo en móvil, verde en pantallas medianas, rosa en grandes y teal en elr esto de pantallas -->
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
En Tailwind tenemos tres aspectos que podemos modificar de la letra, estos son:
-
Tipo de letra. Por defecto tenemos tres tipos de letra disponibles,
sans,serifymono.<h1 class="font-sans">Hello World!</h1> <h1 class="font-serif">Hello World!</h1> <h1 class="font-mono">Hello World!</h1> -
Tamaño.
<h1 class="text-3xl">Hello World!</h1> -
Si es cursiva o negrita.
<ul> <li class="italic">Lorem ipsum dolor sit amet.</li> <li class="font-bold">Lorem ipsum dolor sit amet.</li> <li class="font-extrabold">Lorem ipsum dolor sit amet.</li> <li class="font-light">Lorem ipsum dolor sit amet.</li> <li class="font-hairline">Lorem ipsum dolor sit amet.</li> </ul>
Dentro del espaciado podemos hacer referencia al espaciado entre letras o líneas. Las dos instrucciones que nos ayudan a conseguir dicho espaciado son tracking y leading.
Tracking es el espacio que se da entre cada letra.
<h1 class="tracking-widest">Hello World!</h1>
Leading por otro lado es el espacio entre cada línea de texto.
<p class="leading-loose">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, corrupti totam. Earum id accusantium explicabo consequatur deserunt rerum nam reprehenderit. Modi beatae facere omnis voluptatum ad exercitationem deleniti ipsam blanditiis.</p>
Además del espaciado también podemos manipular el posicionamiento de los textos.
<p class="text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, corrupti totam. Earum id accusantium explicabo consequatur deserunt rerum nam reprehenderit. Modi beatae facere omnis voluptatum ad exercitationem deleniti ipsam blanditiis.</p>
Podemos también aplicar estilos de subrayado o tachado.
<h1 class="line-through">Hello World!</h1>
<h2 class="underline">How are you?</h2>
Por último podemos aplicar transformaciones a los textos como poner todas mayúsculas o minúsculas o capitalizar los párrafos.
<h1 class="uppercase">Hello World!</h1>
<h2 class="capitalize">how are you?</h2>
<h3 class="lowercase">Hello World!</h3>
Las propiedades de display son útiles para poder controlar las dimensiones o espacios. Las propiedades básicas de display son:
-
Block → Con esta configuración los bloques abarcan toda la pantalla.
<div class="text-center"> <div class="block bg-blue-800">1</div> <div class="block bg-blue-500">2</div> <div class="block bg-blue-300">3</div> </div> -
Inline-block → Sólo ocupan el espacio necesario para mostrar lo que hay en su interior.
<div class="text-center"> <div class="inline-block bg-blue-800">1</div> <div class="inline-block bg-blue-500">2</div> <div class="inline-block bg-blue-300">3</div> </div> -
Inline → Sólo ocupan el espacio necesario para mostrar lo que hay en su interior y la altura del elemento es indiferente.
<div class="text-center"> <div class="inline bg-blue-800">1</div> <div class="inline bg-blue-500">2</div> <div class="inline bg-blue-300">3</div> </div> -
Hidden → El elemento en cuestión no se muestra.
<div> <div class="inline-block bg-blue-800">1</div> <div class="inline-block bg-blue-500">2</div> <div class="hidden bg-blue-300">3</div> <div class="inline-block bg-blue-100">4</div> </div>
Flex es otra propiedad de display pero nos habilita otras propiedades para manipular nuestras cajas. Las propiedades propias de flexbox serán ilustradas a continuación, pero antes hay que tener en cuenta que para usarlas debemos de anteponer la clase flex para habilitarlas.
-
Flex direction
<div class="flex flex-col"> <div class="bg-blue-300">1</div> <div class="bg-blue-300">2</div> <div class="bg-blue-300">3</div> </div> -
Align items
<div class="flex items-center"> <div class="bg-blue-300">1</div> <div class="bg-blue-300">2</div> <div class="bg-blue-300">3</div> </div> -
Justify content
<div class="flex justify-center"> <div class="bg-blue-300">1</div> <div class="bg-blue-300">2</div> <div class="bg-blue-300">3</div> </div> -
Order
<div class="flex justify-center items-center"> <div class="order-3 bg-blue-300">1</div> <div class="order-1 bg-blue-300">2</div> <div class="order-2 bg-blue-300">3</div> </div>
Flexbox es un tema muy amplio, así que los invito a leer más a detalle sobre este tema en este otro artículo.
<h3>Grid</h3>Tailwind CSS incluye CSS grid con todas sus propiedades disponibles. Hay que recordar que CSS Grid también es un tema muy extenso y podemos profundizar nuestro conocimiento de este en este otro artículo.
Teniendo los conocimientos básicos de CSS grid entender como lo maneja Tailwind será facilísimo. Para empezar a usar las bondades de esta característica simplemente le debemos de indicar al elemento padre que queremos trabajar con grid, esto se hace incluyendo la clase grid.
Con lo anterior listo podemos empezar a trabajar con las columnas, Tailwind nos permite definir un máximo de doce columnas.
<!-- Grid de 3 columnas -->
<div class="grid grid-cols-3">
<div class="bg-red-400">A</div>
<div class="bg-red-400">B</div>
<div class="bg-red-400">C</div>
</div>
El número de columnas se puede adaptar a los diferentes tamaños de pantalla, esto se hace utilizando los puntos de quiebre.
<!-- Grid de 3 columnas en dispositivos medianos en adelante -->
<div class="grid grid-cols-1 sm:grid-cols-3">
<div class="bg-red-400">A</div>
<div class="bg-red-400">B</div>
<div class="bg-red-400">C</div>
</div>
Si queremos tener espaciado entre dichas columnas tenemos el gap.
<!-- Grid de 3 columnas con un gap de 4 -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-red-400">A</div>
<div class="bg-red-400">B</div>
<div class="bg-red-400">C</div>
</div>
También podemos manejar el tamaño de cada caja, para esto esta la clase col-span-{n} donde n es la cantidad de columnas que se va a expandir nuestra caja.
<div class="grid grid-cols-3">
<!-- A tendría dos espacios de tamaño -->
<div class="bg-red-400 col-span-2">A</div>
<div class="bg-red-400">B</div>
<!-- C tendría 3 espacios de tamaño -->
<div class="bg-red-400 col-span-3">C</div>
</div>
¿Y si queremos definir donde inicia y donde termina cada caja? Para eso tenemos las clases col-start-{n} y col-end-{n} donde n es la línea del grid en la que se desea empezar o terminar.
<div class="grid grid-cols-3">
<div class="bg-red-400 col-span-2">A</div>
<div class="bg-red-400">B</div>
<!-- C inicia en en la línea 1 y termina en la 4 -->
<div class="bg-red-400 col-start-1 col-end-4">C</div>
</div>
Así como todas las propiedades anteriores hacen referencia a las columnas de la misma forma podemos afectar a las filas cambiando el cols por row.
Son las instrucciones que utilizamos para lograr que nuestro diseño cambien dependiendo de ciertas circunstancias. Las variantes pueden ser:
- Responsive → sm, md, lg y xl.
- Hover → hover.
- Focus → focus.
- Disabled → disabled.
<button disabled class="disabled:opacity-25 bg-blue-500">Submit</button>
Y con eso ya podemos arrancar a trabajar con nuestros propios diseños. Si quieren ver el artículo original los invito a revisarlo aquí, y si quieren saber un poco más de mis articulos en mi twitter anuncio cada que subo uno.
Espero que les sea de mucha útilidad a todos.