Configurar un proyecto para utilizar Tailwind CSS

¡Hola! Estas últimas semanas he estado puliendo mis habilidades en Front y en este proceso en dado con el framework de Tailwind CSS. La verdad es que me ha sorprendido para bien dada su facilidad de aprendizaje y como ayuda a maquetar sites mucho más rápido que si lo hiciéramos solo con CSS.

Por eso me he decidido a hacer un par de tutoriales en el que primero veremos toda la parte de la configuración del proyecto y en el segundo cómo crear la página principal de un blog para que veáis lo fácil que es hacerlo con este sistema, pero antes vamos a introducirnos un poco más en que es Tailwind CSS.

¿Qué es Tailwind CSS?

Tailwind CSS es un conjunto de clases de CSS de bajo nivel altamente personalizable que nos brinda todos los tipos de configuración que necesitemos para crear diseños a medida de forma sencilla y rápida.

¿Cómo configurar un proyecto para usar Tailwind CSS?

Para utilizar Tailwind CSS, primero necesitaremos tener instalado Node.js en nuestra máquina, para ello solo necesitamos seguir este enlace, descargarlo e instalarlo en nuestro PC.

Una vez instalado Node, lo que tendremos que hacer es crear la carpeta raíz de nuestro proyecto y lanzar el siguiente comando:

npm init -y

Este comando generará un archivo llamado package.json donde se guardará información del proyecto ya sean librerías instaladas, versión del proyecto o el nombre del creador.

Una vez hecho esto, instalaremos las librerías que vamos a utilizar, en nuestro caso Tailwind CSS, autoprefixer y postcss-cli:

npm install tailwindcss autoprefixer postcss-cli

Ahora que ya tenemos Tailwind en nuestro proyecto, es hora de crear el archivo base de configuración de Tailwind, este archivo podremos modificarlo posteriormente para importar plugins, temas, etc. Para crearlo lanzaremos el siguiente comando que generará un archivo llamado tailwind.config.js.

npx tailwindcss init

También podemos generar el archivo de configuración completo para ver los códigos de los colores, la correspondencia del tamaño de texto con los píxeles, etc. Esto lo haremos con el siguiente comando que generará un archivo llamado tailwind.config.full.js.

npx tailwindcss init tailwind.config.full.js --full

Ahora creamos el archivo postcss.config.js. Aunque en este tutorial no vamos a profundizar en postcss, para poner un poco en contexto, es una herramienta para transformar CSS con plugins de Javascript. Una vez creado el archivo, añadimos la siguiente línea:

module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')], };

Una vez hecho esto, crearemos un archivo llamado css/tailwind.css, y añadiremos las siguientes líneas. Con esto importaremos los estilos de Tailwind y podremos usarlo en nuestro proyecto. También en este archivo podremos añadir nuestras propias clases customizadas aunque de esto hablaremos en el siguiente tutorial:

@tailwind base; 

@tailwind components; 

@tailwind utilities;

Por último vamos a crear una carpeta llamada public que contendrá toda la parte visible del proyecto. Dentro de ella creamos un archivo llamado css/styles.css que es donde se guardarán todos los estilos y otro archivo donde guardaremos todo el HTML llamado index.html.

Una vez hecho esto, añadiremos un comando al proyecto para que cuando realicemos modificaciones automáticamente se reflejen en el archivo styles.css y de esta forma siempre tengamos nuestros estilos actualizados. Esto lo haremos abriendo el archivo package.json y añadiendo la siguiente línea dentro de scripts:

{
  .
  .
  .
  "scripts": {
    "dev": "postcss css/tailwind.css -o public/css/styles.css --watch"
  },
  .
  .
  .
}

Ahora solo tenemos que lanzar el comando de más abajo por consola y cada vez que actualicemos el archivo css/tailwind.css se verá reflejado en el archivo public/css/styles.css que es el que importaremos en el archivo index.html.

npm run dev

Conclusiones

Como veis, con unos simples pasos podemos configurar Tailwind CSS y usarlo en nuestros proyectos. En el siguiente tutorial veremos como utilizarlo para maquetar un blog 🚀.

Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.

Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.

Nos leemos 👋.