Como usar Tailwind CSS en una app de Django
Tags: tailwindcss, django
Published: 2024-06-18 03:22:18

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:


```python
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',
            ],
        },
    },
]
```

## Paso 2: Instalación de django-compressor

Instala django-compressor ejecutando el siguiente comando:

```bash
pip install django-compressor
```

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

```python
# settings.py
INSTALLED_APPS = [
    ...
    'compressor',
    ...
]
```

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

```python
COMPRESS_ENABLED = True
COMPRESS_ROOT = BASE_DIR / 'static'
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)
```

## 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
```

## 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:

```html
{% 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>
```

## Paso 6: Instalación de Tailwind CSS

Para instalar Tailwind CSS utilizaremos npm:

```bash
npm install -D tailwindcss
```

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

```bash
npx tailwindcss init
```

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:

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

## 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/`:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 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:

```bash
npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --minify
```

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:

```bash
npx tailwindcss -i ./static/src/input.css -o ./static/src/output.css --watch --minify
```

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:

```html
<div class="bg-black p-3 rounded-lg">
    <h1 class="text-2xl text-white">Hola mundo</h1>
</div>
```

## 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.