Webpack + Tailwindcss con ES6+

44955

Atendiendo a la clase Loaders para CSS y preprocesadores de CSS, agregaremos Tailwindcss a nuestro proceso de integración con webpack.

Cabe mencionar que utilizaremos ES6+ para desarrollar esta integración, por lo que procuraremos tener soporte con babel 7+

Instalación de dependencias
Dividiremos las dependencias a instalar en 3 secciones:

Dependencias core
Dependencias de babel
Dependencias de webpack, los cuales los serviré con el servicio webpack-dev-server
Nota. Deberá inicializar su proyecto con nodejs.

Dependencias core

npm i -D webpack webpack-cli webpack-dev-server && npm i tailwindcss

Dependencias babel

npm i -D @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/register

Dependencias webpack

npm i -D babel-loader css-loader html-webpack-plugin mini-css-extract-plugin postcss postcss-loader style-loader

Donde al final, nuestro package.jsonquedará de la siguiente forma:

"devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.8",
    "@babel/plugin-transform-runtime": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/register": "^7.13.8",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.0",
    "html-webpack-plugin": "^5.2.0",
    "mini-css-extract-plugin": "^1.3.9",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "tailwindcss": "^2.0.3"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }

Nota. Observará que babel está configurado en el mismo archivo package.json ; puede realizar la configuración de babel en un archivo .babelrc o dentro del archivo de configuración de webpack como una option de babel en las reglas.

Configuración de Tailwindcss y Postcss
Atendiendo a la nomenclatura de ES6, podrá escribir sus códigos de múltiples formas donde una, por ejemplo, es la que le muestro a continuación:

// tailwind.config.js

exportconst purge = ['./**/*.html'];
exportconst darkMode = false;
exportconst theme = {
  extend: {},
};
exportconst variants = {
  extend: {},
};
exportconst plugins = [];

// postcss.config.jsimport tailwindcss from'tailwindcss';
exportconst plugins = [tailwindcss];

Configuración de archivos estáticos
Para este punto, escribiremos los archivos estáticos que serán servidos por parte de Webpack, atentiendo a la clase HTML en Webpack donde anexaré una línea para comprobar la ejecución de nuestros estilos por parte de Tailwind:


<htmllang="en">
  <head>
    <metacharset="UTF-8" />
    <metahttp-equiv="X-UA-Compatible"content="IE=edge" />
    <metaname="viewport"content="width=device-width, initial-scale=1.0" />
    <title>Webpack Tailwindcsstitle>
  head>

  <body>
    <h1class="bg-red-900 text-white">Hello worldh1>
  body>
html>

// src/index.jsimport'./style.css';

/* src/style.css */

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

Configuración de Webpack
Para este punto, lo úlitmo que nos falta configurar es nuestro archivo webpack.config.babel.js dejando en claro el nombre para que babel pueda realizar su chamba.

import { resolve, join } from"path";import HtmlWebpackPlugin from"html-webpack-plugin";import MiniCssExtractPlugin from"mini-css-extract-plugin";

exportdefault () => {
  return {
    entry: "./src/index",
    output: {
      path: resolve(__dirname, "dist"),
      filename: "bondle.js",
    },
    resolve: {
      extensions: [".js"],
    },
    module: {
      rules: [
        {
          test: /\.js?$/,
          loader: "babel-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: resolve(__dirname, "./public/index.html"),
      }),
      new MiniCssExtractPlugin({
        filename: "style.css",
      }),
    ],
    devServer: {
      contentBase: join(__dirname, "dist"),
      port: 8080,
    },
  };
};

Y, configurando los scripts de nuestro archivo package.json:

"scripts": {
    "dev": "webpack serve --mode development --open"
  }

Por si quedó duda de la distribución del directorio de trabajo:

webpack-tailwind
  └─⫸  package.json
  └─⫸  postcss.config.js
  └─⫸  tailwind.config.js
  └─⫸  webpack.config.babel.js
  └─⫸  public
		└─⫸ index.html
  └─⫸  src
		└─⫸ index.js
		└─⫸ style.css

Podrán clonar el respositorio webpack-tailwind

hace 4 años

Escribe tu comentario

+ 2

Ordenar por:

Top

cacortesl01

21440Puntos

2 años

Estaba buscado esto, muchas gracias

luisAriza

30385Puntos

3 años

Genial, me sirvió.

Muchas gracias, compañero.

EdgarGc026

22402Puntos

3 años

Muy buen tutorial me funciono al 100… Aunque la parte de devServer no me funciono, así que, opte por removerlo de mi archivo webpack.

De ahí en fuera, todo al 100.

Gracias, nuevamente 😄

don-pepo

26857Puntos

4 años

Gracias por el tutorial. Solo un comentario al dia de hoy Oct. 10, 2021. Webpack marca un error en devServer, con la propiedad “contentBase”, pues menciona que no existe.
Todo lo demás funcionó bien.

roremdev

44955Puntos

4 años

Cierto, muchas gracias por notarmelo.