🚀 Lleva el poder de Tailwind a tus proyectos con Webpack

¿Tomaste el Curso de Tailwind CSS y quedaste maravillado con la facilidad de personalizar tus elementos HTML? ¿Quieres combinar Tailwind con proyectos un poco más robustos utilizando Webpack? Prepara tu editor de código favorito y tu consola de comandos para aprender a hacerlo justo ahora.

📚 Estructura del proyecto

Antes comenzar revisemos un poco cómo será la estructura de las carpetas del proyecto que vamos a crear.

- tailwind-webpack-project/
| dist/|-- index.html| src/|-- index.js|-- styles.css| package-lock.json| package.json| postcss.config.js| README.md| tailwind.config.js| webpack.config.js

Como podemos observar en la estructura anterior, tenemos dos carpetas importantes que son: dist y src. La carpeta dist contendrá nuestra aplicación ya compilada y la carpeta src es donde estaremos trabajando todos los archivos del proyecto.

El resto de archivos son los archivos de configuración que se crearán ya sea al instalar Webpack o Tailwind.

💫 Instalando dependencias

Crearemos un proyecto de node a través del comando npm init -y como primer paso. Crear un proyecto de Node nos creará los archivos de configuración que nos permitirá trabajar tanto con Webpack como con Tailwind.

❗Antes de ejecutar el comando de npm debemos de asegurarnos que tenemos instalado Node.js en nuestro equipo.

Instalación de Webpack

¡Empecemos con lo divertido! Para instalar webpack ejecutamos el siguiente comando en nuestra terminal, pero antes debemos de asegurarnos que estamos en la carpeta del proyecto donde queremos instalar webpack.

Para ver la ruta en la que se encuentra la terminal podemos usar el comando pwd.

Ya que nos aseguramos que estamos en la carpeta del proyecto ejecutamos el siguiente comando que instalará los módulos necesarios para trabajar con webpack.

npm install webpack webpack-cli webpack-dev-server --save-dev

La bandera --save-dev indica que toda esta instalación será solo para desarrollo y no para producción.

Instalación de Tailwind

Ahora sí lo que nos interesa, instalar Tailwind. Lo cual haremos con el siguiente comando, el cual instalará tanto Tailwind como el postcss-cli.

npm install tailwindcss postcss-cli --save-dev

Y por último debemos de instalar el postcss, css y style loader para que webpack pueda trabajar con los estilos.

npm install postcss-loader css-loader style-loader --save-dev

Una vez que esas dependencias se terminen de instalar ya tenemos todo lo que vamos a utilizar el proyecto instalado. Ahora toca empezar a configurar las dependecias instaladas.

🛠️ Configurando el proyecto

Ya que instalamos todo lo necesario, el último paso es configurar el proyecto para poder trabajar con todo lo que instalamos.

Antes de empezar a configurar tenemos que asegurarnos de tener creado los archivos webpack.config.js y postcss.config.js ya que estos archivos contendran parte de las configuraciones del proyecto. En caso de no tenerlos creados podemos usar el comando touch para hacerlo.

touch webpack.config.js
touch postcss.config.js

Archivo de configuración del package.json

En este archivo (en la sección de scripts) añadiremos los scripts que nos ayudaran a ejecutar un servidor local o crear la aplicación de producción del proyecto.

Los scripts que recomiendo son:

{
  ...
  "scripts": {
    "start": "webpack-dev-server --mode=development --config webpack.config.js",
		"build": "webpack --mode production",
  }
  ...
}

Archivo de configuración para Webpack

Todo lo que debe de contener el archivo webpack.config.js es lo siguiente:

const path = require("path")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader",
        ],
      },
    ],
  },

  devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, "dist"),
    open: true,
  },
}

Archivo de configuración para PostCSS

El archivo de configuración de PostCSS deberá contener el siguiente código:

module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
}

Se le pueden añadir más configuraciones como la funcionalidad de PurgeCSS, pero para mantener este tutorial lo más simple posible no la he incluido, pero siéntete libre de añadirla y compartir cómo quedaría este archivo con esa funcionalidad en los comentarios de este post 😉.

Si quieres saber más sobre la configuración de PurgeCSS, te recomiendo que vayas a la documentación oficial que puedes encontrar aquí.

Archivo de configuración para Tailwind

El archivo de configuración para Tailwind lo creamos siguiendo la guía de su página oficial. Que es ejecutar el comando npx tailwindcss init para crear el archivo de configuración de tailwind. Dicho comando genera un archivo llamado tailwind.config.js que contendrá lo siguiente:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

En este archivo, como ya vimos en el curso, podemos añadir funcionalidades y extender las características del framework para adaptarlo completamente a nuestras necesidades.

❗No olvidemos añadir las directivas de Tailwind a nuestro archivo src/styles.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Y lo más importante de todo, no hay que olvidar importar el archivo css en el src/index.js.

import"./styles.css"

🎮 Listos para jugar

A continuación te dejo una pantilla HTML para que puedas probar que todo lo hecho anteriormente está funcionando. Este archivo sería nuestro index.html.

<htmllang="en">
  <head>
    <metacharset="utf-8" />
    <metaname="viewport"content="width=device-width,initial-scale=1" />
    <title>Titletitle>
  head>
  <body>
    <divclass="text-red-500">Test Inputdiv>

    <scriptsrc="bundle.js">script>
  body>
html>

Ahora si, simplemente abrimos este archivo en nuestro navegador. No pasará nada y es lo normal, ya que primero tenemos que levantar un servidor local. Esto lo hacemos utilizando los comandos definidos anteriormente en el script del package.json.

npm run start

Y si ya terminamos de trabajar en nuestro proyecto y queremos crear el bundle final, utilizaremos el otro comando definido que es:

npm run build

🚀 Conclusiones

Con todo lo anterior, aprendimos como crear un proyecto con Node e instalarle las dependencias necesarias para trabajar con Webpack y con Tailwind, además de esto, ahora sabemos como configurar dichas dependencias y en cuál archivo hacer dicha configuración.

Personalmente no creo conveniente utilizar esta configuración para producción, ya que no tiene PurgeCSS como explicamos unos párrafos arriba; lo que si recomiendo es profundizar en la documentación de Tailwind la cual la puedes encontrar aquí, para saber qué más puedes hacer con este maravilloso framework.

Si llegaste hasta aquí imagino que ya tomaste el curso de Tailwind CSS, si no lo has hecho ¿qué esperas? es de mis cursos favoritos aquí en Platzi. Pero si eres como yo que ya lo tomó puedes seguir tu camino aprendiendo sobre PostCSS en el Curso de PostCSS, para así entender por qué Tailwind y PostCSS son la pareja perfecta.

Por otro lado si lo que quieres es profundizar en la configuración de Webpack para tus proyectos, puedes seguir con el Curso de Webpack donde aprenderás a configurar un entorno de desarrollo y producción más a fondo.

#NuncaParesDeAprender 💚👌🏻