Como integrar Django con Tailwind y HTMX - Parte 2

Como integrar Django con Tailwind y HTMX - Parte 2

Hola querido lector, hoy vengo con la segunda parte de la serie para integrar Django, Tailwind y htmx. Estaremos viendo como usar Tailwind en un proyecto con Django a través de npm.

Si es la primera vez que llegas a mi blog, puedes mirar el primer artículo de esta serie para que puedas entrar en contexto.

Instalar Tailwind

Para instalar Tailwind en nuestro proyecto vamos utilizar npm, nos vamos a la terminal y ejecutamos el siguiente comando en la terminal:

$ npm install -D tailwindcss postcss postcss-cli autoprefixer

Una vez finalizada la instalación inicializamos Tailwindcss el cual nos creará el archivo de configuración para su integración en Django.

$ npx tailwindcss init

Si nos vamos al editor de código podemos ver el archivos tailwind.config.js en la raíz del proyecto. Además de la carpeta node_modules y los archivos package.json y package-lock.json.

Configurar Tailwind y PostCSS

Instalar Tailwind CSS como complemento de PostCSS es la forma más sencilla de integrarlo con herramientas de compilación como webpack, Rollup, Vite y Parcel.

El siguiente paso es configurar Tailwind y PostCSS y para eso editamos el archivos tailwind.conf.js con el siguiente contenido:

module.exports = {
  content: ['./main/templates/main/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

A través de la clave content le especificamos la ruta donde se encuentran los archivos html donde queremos integrar Tailwind, en este caso en todos los archivos html de la app main.

El siguiente paso es configurar PostCSS, para lo cual creamos el archivo postcss.config.js en la raíz del proyecto con el siguiente contenido:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

A continuación creamos el archivo main.css donde vamos a incluir los estilos del proyecto generados por Tailwind. Esto normalmente se hace dentro de la carpeta static de Django. Para este ejemplo crearemos la carpeta public con static y static_dev, esta última tendrá los archivos estáticos del entorno de desarrollo y static tendrá los archivos estáticos del entorno de producción.

$ mkdir -p public/static/css
$ mkdir -p public/static_dev/css

Creamos el archivos main.css dentro de la carpeta public/static_dev/css/ con el siguiente contenido:

@tailwind base;
@tailwind comnponents;
@tailwind utilities;

...con lo cual estaremos incluyendo Tailwind con sus componentes y utilitarios.

Por último es necesario configurar las rutas estáticas en Django para que este sepa donde buscar los archivos estáticos del proyecto.

Editamos el archivosecomerce/settings.py y añadimos las siguientes opciones de configuración:

import os
...
...

STATIC_ROOT = BASE_DIR / 'public' / 'static'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'public/static_dev/'),
)

Script de NPM

Por último necesitamos crear un script para generar los estilos de Tailwind que vamos utilizando en nuestras plantillas html.

Editamos el archivo package.json y añadimos el objeto scripts al inicio del archivo:

{
  "scripts": {
    "build": "postcss public/static_dev/css/main.css -o public/static_dev/css/main.min.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.18",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.2.1"
  }
}

Aquí le estamos diciendo a PostCSS que genere un archivo llamado main.min.css con los estilos que estamos utilizando en nuestras plantillas html. Y esto brutal porque de esta forma no necesitamos incluir todos lo estilos de Tailwind, sino únicamente los que utilizamos.

Para comprobar que toda la configuración es correcta nos vamos a la terminal y ejecutamos el siguiente comando:

$ npm run build
> build
> postcss public/static_dev/css/main.css -o public/static_dev/css/main.min.css

Si todo ha ido bien, ahora podemos ver el archivo main.min.css en la carpeta public/static_dev/css/ con los estilos necesarios de Tailwind.

Para testear que se generan los estilos que utilizamos en las plantillas html editamos la plantilla main/templates/main/index.html que creamos en el artículos anterior e incluimos el archivo main.min.css.

{% load static %} <!-- Templatetags statics -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/main.min.css' %}"> <!-- Archivo de estilos css -->
</head>
<body>
    <h1>Integración Django + Tailwind + HTMX</h1>
</body>
</html>

Abrimos la consola del navegador y comprobamos que el archivo css se está cargando correctamente.

image.png

Ahora añadimos algunas clases de Tailwind en el archivo index.html

...
<body class="container mx-auto px-4">
    <h1 class="bg-sky-200">Integración Django + Tailwind + HTMX</h1>
</body>
...

...nos vamos a la terminal y ejecutamos el build nuevamente:

$ npm run build

Actualizamos la página y deberíamos de ver los estilos aplicados:

image.png

Si editamos el archivo main.min.css podemos comprobar que al final se han incluido los estilos que utilizamos en la plantilla.

image.png

Genial... pero es muy incómodo tener que estar ejecutando el build cada ves que realicemos un cambio para generar el archivo main.min.css.

Para automatizar este proceso vamos a instalar npm-watch

$ npm install npm-watch

Editamos el archivo package.json y lo modificamos como sigue:

{
  "watch": {
    "build": {
      "patterns": [
        "main"
      ],
      "extensions": "html",
      "quiet": false
    }
  },
  "scripts": {
    "build": "postcss public/static_dev/css/main.css -o public/static_dev/css/main.min.css",
    "watch": "npm-watch"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "npm-watch": "^0.11.0"
  }
}

Con esta configuración lo que haremos será observar los cambios que se realicen en los archivos html y ejecutar el build automáticamente.

Para comprobarlo, abrimos una nueva terminal y nos aseguramos de que estamos en la ruta del proyecto y ejecutamos el siguiente script de npm:

$ npm run watch

> watch
> npm-watch

No task specified. Will go through all possible tasks
[build] [nodemon] 2.0.20
[build] [nodemon] clean exit - waiting for changes before restart

Ahora nos vamos a la plantilla html y cambiamos la clase bg-sky-200 por bg-red-600 y observemos como la terminal se actualiza automáticamente.

Si actualizamos la página podemos ver como ha cambiado el background a color rojo:

image.png

Conclusiones

Como hemos podido ver esta integración en brutal porque nos permite incluir unicamente las clases de css que vamos utilizando en las plantillas html y todo el proceso se realiza de forma automática.

Hasta aquí esta segunda entrega, espero que te sea útil. Recuerda que puedes clonar este proyecto desde GitHub.

Si te gusta este tipo de contenidos subscribete para que no te pierda ninguna entrega de esta seria.

Hasta la próxima...

Did you find this article valuable?

Support Roylan Suarez Reyes by becoming a sponsor. Any amount is appreciated!