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',
],
},
},
]
Paso 2: Instalación de django-compressor
Instala django-compressor ejecutando el siguiente comando:
pip install django-compressor
Y agregalo a la lista de aplicaciones instaladas dentro del archivo settings.py:
# settings.py
INSTALLED_APPS = [
...
'compressor',
...
]
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',)
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:
{% 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:
npm install -D tailwindcss
Para crear el archivo de configuraciones de tailwind tailwind.config.js, ejecutamos el siguiente comando:
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:
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/:
@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:
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:
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:
<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.
Top comments (0)