Tailwind CSS es un framework de CSS que esta en boca de todos principalmente porque la velocidad y consistencia que puedes crear diseños web haciéndolo todo directamente en tu código de HTML, utilizando utility classes.
Aprenderemos a como probar Tailwind CSS sin la necesidad de instalar nada, solo con nuestro navegador. Y posteriormente instalaremos y crearemos nuestro ambiente de desarrollo para poder utilizar en nuestros proyectos web.
Probrando Tailwind CSS
Si eres como yo, que cuando hay una nueva tecnología quieres probarla rápidamente sin tener que perder tiempo o sin instalar componentes o librerías que quizá después quieras desinstalar. Te voy a mostrar como hacer esto, para conocer los benenefícios de Tailwind CSS rápidamente.
Para hacer esto tenemos varias opciones, pero yo te mencionare las 3 que mas me gustan.
Estaremos de acuerdo que para poder desarrollar o probar un nuevo diseño web necesitamos: un servidor web, HTMLs y CSSs.
Hello World using Tailwind CSS
Este codigo es el que utilizaremos para probar cada uno de los ambientes. Lo que vamos a hacer es colocar una etiqueta h1 en el centro de nuestra página web.
<div class="h-screen flex items-center justify-center">
<h1 class="text-6xl">
Hello Tailwind CSS
</h1>
</div>
Como te podras dar cuenta no fue necesario usar una hoja de estilos.
Este es el ambiente oficial de Tailwind CSS, donde con solo entrar ya puedes empezar a jugar con el framework no es necesario hacer nada adicional, pero te permite cambiar la configuración de Tailwind CSS como lo harías en un ambiente de desarrollo local. Al poder cambiar la configuración quiere decir que puedes personalizar valores que ya estan predefinidos para usarlos a tu gusto.
Esta lo único que necesitas hacer es entras a CodePen crear un Pen (es tu espacio de trabajo) donde encontraras un panel de HTML, CSS y otro de Javascript. Te darás cuenta que el único que necesitaras es el HTML. Por lo que puedes esconder el de CSS y Javascript.
Tambien puedes dar clic aquí para Crear un Tailwind CSS Pen ya configurado.
Si te vas a Settings encontrás que en CSS esta agregada la librería de Tailwind CSS.
Opción 3: CDN
La tercera opción es creando un archivo de HTML y agregando un CDN como este
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Ventajas
Las ventajas principales que comparten las tres es que puedes empezar a jugar con el framework sin mucho esfuerzo y casi inmediatamente.
- CodePen: Te permite crear una cuenta, y al crear tus propios proyectos en la nube puedes tenerlos guardados para después consultarlos o compartirlos. Muchas veces queremos crear un prototipo rápidamente para poderlo compartir para aprobación del cliente o con fines educativos.
- Play Tailwind CSS, te permite jugar con el framework incluyendo todas las opciones de configuración y personalización. Algo impresionante para mi es lo bien que este hecho en cuanto a que puedes realizar los cambios al mismo que se reflejan en el panel de display. Si realizas un cambio en la configuración es casi inmediato. Si pasas el cursor encima de una clase utilitaria puedes ver que es lo que hace detrás de escena con CSS puro.
- CDN: Te permite con solo agregar un CDN en cualquier proyecto o archivo de HTML ya poder disfrutar con los beneficios de clases utilitarias de Tailwind CSS.
Desventajas
Las desventajas quizá la mas obvia es que no no es un sitio proyecto final, su uso es para aprender, crear prototipos o compartir diseños.
Instalación en Ambiente de desarrollo Local.
Prerequisitos
Lo que vamos necesitar es un Navegador, un Editor, Node JS, Tailwind CSS, PostCSS y un servidor web local.
Navegadores
En cuanto a los navegadores personalmente uso Google Chrome por las herramientas de desarrollo que trae integrados. Otro que es de mi agrado es Firefox, pero realmente puedes utilizar el de tu preferencia. Hay varios Navegadores que estan basados en Chronium que traen las herramientas de Chrome que quiza puedas preferir. Realmente lo importante es que te sientas cómodo con tus herramientas.
Editores
En cuanto a los editores hay varios que he utilizado y que me gustan. Pero creo que el gratuito que trae mejores herramientas para Tailwind CSS es VS Code ya que los creadores de la herramienta desarrollaron una extensión Tailwind CSS Intellisence que es muy bueno y es 100% recomendable, te ayuda con autocomplete, y mostrandote la paleta de colores directamente en el editor.
Los otros que a mi me gusta usar son los creados por JetBrains y Sublime Text. Yo en lo personal en todos estos utilizo alguna integración de Vim (ya que no podría vivir sin el quizá exagero, pero si hace mi trabajo como desarrollador es mas productiva). He agregado los links o enlaces para que puedas descargar e instalar el de tu preferencia.
Node JS
Node JS es un entorno de tiempo de ejecución de javascript. Esto es importante porque es la herramienta que nos ayudara a procesar Tailwind CSS para generar nuestro archivo final de CSS que es el que necesitamos para desarrollar. Además de que utilizaremos npm que es un administrador de paquetes de Javascript, que utilizaremos para crear nuestro proyecto e instalar las librerías y componentes necesarios para el desarrollo.
Ha varias formas de instalarlo si es que no lo tienes instalado ya, pero la mas fácil es descargarlo y ejecutar el paquete de instalación que compartí en el enlace anterior.
Instalando y creando nuestro ambiente de desarrollo.
Nota: Yo trabajo normalmente en un ambiente Linux/Unix por lo que los comandos están enfocados en este ambiente, pero trato de ser explicito a lo que se debe hacer para que lo puedas replicar en tu ambiente de preferencia.
Lo primero que haremos es crear una carpeta desde nuestra terminal o consola donde crearemos nuestro proyecto.
mkdir miproyectofavorito
cd miproyectofavorito
Una vez dentro de la carpeta o folder ejecutamos el siguiente comando para crear nuestro proyecto de javascript.
npm init -y
Al ejecutarlo veremos que se creo un archivo package.json que contiene la información sobre nuestro proyecto.
Teniendo nuestro proyecto creado ya podemos instalar los demás componentes. Aunque antes me gusta crear la estructura de archivos de mi proyecto, así que hagamos eso.
Necesitaremos un archivo de CSS para generar nuestro archivo final con todas las utilerias de Tailwind CSS. Entonces hagamos eso, creamos una carpeta de css y un archivo app.css dentro de esta.
mkdir css
touch css/app.css
Abrimos este archivo y ponemos las siguientes instrucciones que Tailwind CSS necesita.
@tailwind base;
@tailwind components;
@tailwind utilities;
Ahora necesitamos una carpeta que sera la que publicaremos en nuestro servidor web local, que contenta nuestros archivos HTML y CSS final.
mkdir -p public/css
touch public/index.html
Editamos nuestro archivo index.html donde nos aseguramos estar llamando a nuestra hoja de estilos generada con Tailwind CSS <link rel="stylesheet" href="/css/app.css"> dentro de head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
</body>
</html>
Ya que tenemos la estructura iniciemos instalando Tailwind CSS y sus dependencias. Esto lo haremos usando npm que como habia mencionado es un administrador de paquetes de node js.
Ejecutamos el siguiente comando.
npm install tailwindcss postcss-cli postcss autoprefixer
Como podemos ver instalamos Tailwind CSS y Post CSS, asi como Autoprefixer que veremos mas tarde porque es útil.
Ahora necesitamos crear algunos archivos de configuración para que funcione como deseamos.
¿Como funciona Tailwind CSS?
Una breve introducción a como funciona y porque se necesito instalar lo anterior. Tailwind CSS utiliza PostCSS que es un Pre-Procesador de archivos, esto quiere decir que va generar un archivo final CSS que es el que utilizaremos, pero para poder generarlo necesita información de entrada. Esta información de entrada es un archivo CSS base, asi como un par de archivos de configuración para personalizar nuestro producto final.
Regresando a la instalación después de ese paréntesis.
Crearemos los archivos de configuración de PostCSS y de Tailwind CSS
touch postcss.config.js
Una vez creado y utilizando tu editor ingresaremos las siguientes instrucciones
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
Para crear nuestro archivo de configuración de Tailwind utilizaremos el comando npx que viene con Node JS.
npx tailwindcss init
Este creara un archivo tailwind.config.js que contiene la configuración base para poder realizar nuestra personalización.
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
// defaultLineHeights: true,
// standardFontWeights: true
},
purge: [],
theme: {
extend: {}
},
variants: {},
plugins: []
}
Ya casi estamos listos, lo ultimo que falta es crear los scripts de procesamiento. Esto lo hacemos en nuestro archivo de package.json
En este archivo encontraremos una sección con la instrucción de scripts. Aquí agregaremos lo siguiente:
"scripts": {
"build": "postcss css/app.css -o public/css/app.css"
},
Para ejecutar este script lo que haremos es
npm run build
Al ejecutarlo lo que sucederá es que procesará nuestro archivo base app.css y generará nuestro archivo final en public/css/app.css.
Tambien puedes hacer el build usand Tailwind CSS. Esto seria de la siguiente manera.
NODE_ENV=production npx tailwindcss -i css/app.css -o public/css/app.css --minify
You can also specify the tailwinc.config.js file location using the -c ./config/tailwind.js
Instalando Web Server Local e iniciando nuestro Web Server
Quiza no tengas un servidor web local, para eso vamos a instalar uno, si ya cuentas con uno, entonces puedes irte a la siguiente sección.
npm install -g live-server
Ahora iniciamos nuestro web server con la siguiente instrucción
live-server public
Si estas usando tu ambiente local recuerda procesar Tailwind CSS con el comando de npm run build.
Summary
Hemos conocido herramientas para probar, crear prototipos rápidamente sin la necesidad de instalar nada. Así con la facilidad de compartirlos con nuestro equipo de trabajo o con el mundo.
Instalamos y configuramos nuestro ambiente de desarrollo local para poder crear proyectos utilizando Tailwind CSS.
La documentación completa la puedes encontrar en Tailwind CSS Documentation
Espero este articulo te haya servido, cualquier duda o comentario estoy en twiter @victoryoalli