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 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 require necesarios 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.
<linkhref="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.
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.
Como otros frameworks de CSS tenemos disponible una clase contenedora que nos permite indicar el ancho máximo de nuestro documento.
<divclass="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.
<h1class="bg-yellow-500">Hello World!</h1>Texto.
<h1class="text-white">Hello World!</h1>Bordes.
<inputclass="border border-blue-500"type="text"placeholder="Lorem impusm">Placeholder.
<inputclass="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.
<h1class="h-32">Hello World!</h1>Width.
<h1class="w-1/4">Hello World!</h1>Margin
<h1class="ml-8 mt-16 mb-5">Hello World!</h1>Padding.
<h1class="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.
<h1class="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 --><divclass="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, serif y mono.
<h1class="font-sans">Hello World!</h1><h1class="font-serif">Hello World!</h1><h1class="font-mono">Hello World!</h1>Tamaño.
<h1class="text-3xl">Hello World!</h1>Si es cursiva o negrita.
<ul><liclass="italic">Lorem ipsum dolor sit amet.</li><liclass="font-bold">Lorem ipsum dolor sit amet.</li><liclass="font-extrabold">Lorem ipsum dolor sit amet.</li><liclass="font-light">Lorem ipsum dolor sit amet.</li><liclass="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.
<h1class="tracking-widest">Hello World!</h1>Leading por otro lado es el espacio entre cada línea de texto.
<pclass="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.
<pclass="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.
<h1class="line-through">Hello World!</h1><h2class="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.
<h1class="uppercase">Hello World!</h1><h2class="capitalize">how are you?</h2><h3class="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.
<divclass="text-center"><divclass="block bg-blue-800">1</div><divclass="block bg-blue-500">2</div><divclass="block bg-blue-300">3</div></div>Inline-block → Sólo ocupan el espacio necesario para mostrar lo que hay en su interior.
<divclass="text-center"><divclass="inline-block bg-blue-800">1</div><divclass="inline-block bg-blue-500">2</div><divclass="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.
<divclass="text-center"><divclass="inline bg-blue-800">1</div><divclass="inline bg-blue-500">2</div><divclass="inline bg-blue-300">3</div></div>Hidden → El elemento en cuestión no se muestra.
<div><divclass="inline-block bg-blue-800">1</div><divclass="inline-block bg-blue-500">2</div><divclass="hidden bg-blue-300">3</div><divclass="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
<divclass="flex flex-col"><divclass="bg-blue-300">1</div><divclass="bg-blue-300">2</div><divclass="bg-blue-300">3</div></div>Align items
<divclass="flex items-center"><divclass="bg-blue-300">1</div><divclass="bg-blue-300">2</div><divclass="bg-blue-300">3</div></div>Justify content
<divclass="flex justify-center"><divclass="bg-blue-300">1</div><divclass="bg-blue-300">2</div><divclass="bg-blue-300">3</div></div>Order
<divclass="flex justify-center items-center"><divclass="order-3 bg-blue-300">1</div><divclass="order-1 bg-blue-300">2</div><divclass="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 --><divclass="grid grid-cols-3"><divclass="bg-red-400">A</div><divclass="bg-red-400">B</div><divclass="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 --><divclass="grid grid-cols-1 sm:grid-cols-3"><divclass="bg-red-400">A</div><divclass="bg-red-400">B</div><divclass="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 --><divclass="grid grid-cols-3 gap-4"><divclass="bg-red-400">A</div><divclass="bg-red-400">B</div><divclass="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.
<divclass="grid grid-cols-3"><!-- A tendría dos espacios de tamaño --><divclass="bg-red-400 col-span-2">A</div><divclass="bg-red-400">B</div><!-- C tendría 3 espacios de tamaño --><divclass="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.
<divclass="grid grid-cols-3"><divclass="bg-red-400 col-span-2">A</div><divclass="bg-red-400">B</div><!-- C inicia en en la línea 1 y termina en la 4 --><divclass="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:
<buttondisabledclass="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.
