logo cosasdedevs

Configurar un proyecto para utilizar Tailwind CSS

Configurar un proyecto para utilizar Tailwind CSS

My Profile
Ago 29, 2020

¡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 🚀.

Al igual que siempre, os recomiendo seguirme en Twitter y nos vemos en el siguiente tutorial 👋.

241 vistas

Nos tomamos en serio tu privacidad

Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si pulsas entendido aceptas su uso. Ver política de cookies.

🐍 Sígueme en Twitter

Si te gusta el contenido que subo y no quieres perderte nada, sígueme en Twitter y te avisaré cada vez que cree contenido nuevo 💪
Luego ¡Te sigo!