TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |django

Como usar Tailwind CSS en una app de Django

josemiguelsandoval

Jose Miguel Sandoval

Posted on June 18, 2024

Como usar Tailwind CSS en una app de Django

Tailwind CSS es un framework CSS que es bastante versátil, debido a que permite que cualquier tipo de diseño se pueda indicar directamente desde la clase del elemento, es por esto, que Tailwind ha ganado bastante popularidad en este último tiempo.

Para utlizar Tailwind dentro de una app de Django se puede utilizar la librería django-compressor y el gestor de paquetes npm para la instalación de tailwind. Los pasos necesarios son los siguientes:

Paso 1: Configuración de los templates en Django

Dentro del directorio de Django, crea una nueva carpeta templates/ y configura el archivo settings.py de Django de la siguiente forma para indicarle que se trabajará con esa carpeta:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
Enter fullscreen mode Exit fullscreen mode

Paso 2: Instalación de django-compressor

Instala django-compressor ejecutando el siguiente comando:

pip install django-compressor
Enter fullscreen mode Exit fullscreen mode

Y agregalo a la lista de aplicaciones instaladas dentro del archivo settings.py:

# settings.py
INSTALLED_APPS = [
    ...
    'compressor',
    ...
]
Enter fullscreen mode Exit fullscreen mode

Paso 3: Configuración de django-compressor dentro del archivo settings.py 

COMPRESS_ENABLED = True
COMPRESS_ROOT = BASE_DIR / 'static'
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)
Enter fullscreen mode Exit fullscreen mode

Paso 4: Creación de los archivos estáticos

Crea el directorio static/src/ dentro del proyecto, y crea el archivo input.css dentro del directorio creado. El proyecto debiese quedar como se muestra a continuación:

myproject/
├── manage.py
├── templates
├── myproject
│ ├── init.py
│ ├── settings.py
│ ├── urls.py
│ ├── asgi.py
│ └── wsgi.py
└── static
  └── src
    └── input.css
Enter fullscreen mode Exit fullscreen mode

Paso 5: Creación de un archivo html base

Crea un archivo base.html dentro de la carpeta templates, y escribe lo siguiente en su interior:

{% load compress %}
{% load static %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind</title>

    {% compress css %}
        <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}

</head>
<body>
    {% block content %}

    {% endblock content %}
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Paso 6: Instalación de Tailwind CSS

Para instalar Tailwind CSS utilizaremos npm:

npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

Para crear el archivo de configuraciones de tailwind tailwind.config.js, ejecutamos el siguiente comando:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Para que tailwind reconozca que estamos utilizando los archivos html dentro de la carpeta templates editamos el archivo de configuraciones tailwind.congig.js de la siguiente forma:

module.exports = {
    content: [
        './templates/**/*.html'
    ],
    theme: {
    extend: {},
    },
    plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Paso 7: Importar las directivas de Tailwind

Se deben importar las directivas de Tailwind escribiendo lo siguiente en el archivo input.css que se encuentra dentro del directorio ./static/src/:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Paso 8: Compilación del código de Tailwind

Para compilar el código de Tailwind que necesita Django para importar los estilos, se debe ejecutar el siguiente comando:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --minify
Enter fullscreen mode Exit fullscreen mode

Esto creara un archivo output.css dentro del directorio ./static/src/.

Paso 9: Compilar automáticamente el código de Tailwind

A medida que se va agregando etiquetas con estilo de Tailwind CSS, se necesita volver a ejecutar el comando del paso 8 para que se reconozcan las directivas. Para automatizar esto en el modo de desarrollo, se puede ejecutar el siguiente comando:

npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch --minify
Enter fullscreen mode Exit fullscreen mode

Esto creara un archivo output.css dentro del directorio ./static/src/.

Paso 10: Uso del framework

Ahora ya puedes utilizar Tailwind CSS en tu aplicación de Django:

<div class="bg-black p-3 rounded-lg">
    <h1 class="text-2xl text-white">Hola mundo</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

Conclusiones

Siguiendo estos pasos, podrás utilizar Tailwind dentro de tu aplicación de Django. Cada vez que agregues nuevo código de Tailwind dentro de las etiquetas de HTML, se modificará el archivo ./static/src/output.css si estas utilizando el comando del paso 9.

Espero que te haya sido de utilidad :) Cualquier duda, consulta o sugerencia, házmela llegar a través de los comentarios.

💖 💪 🙅 🚩
josemiguelsandoval
Jose Miguel Sandoval

Posted on June 18, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Como usar Tailwind CSS en una app de Django
tailwindcss Como usar Tailwind CSS en una app de Django

June 18, 2024

Tailwind & Django - Free Starter
tailwindcss Tailwind & Django - Free Starter

October 4, 2023

Tailwindcss: Fall in Love with Writing CSS Again for your Django Application
tailwindcss Tailwindcss: Fall in Love with Writing CSS Again for your Django Application

June 26, 2021