Iniciar un proyecto en Django e integrarlo con Tailwind CSS

En este tutorial aprenderás a crear un proyecto en Django y a integrarlo con Tailwind CSS para mejorar el diseño de tu aplicación.

Requisitos

Python 3.7 o superior
Conocimientos básicos de Django
Node.js (para compilar Tailwind CSS)

1. Crear un entorno virtual e instalar Django

Primero, crea un entorno virtual para mantener las dependencias organizadas:

python -m venv env

Activa el entorno virtual:

Windows:

env\Scripts\activate

MacOS/Linux:

source env/bin/activate

Instala Django:

pip install django

2. Iniciar un proyecto y una aplicación en Django

Crea un nuevo proyecto Django:

django-admin startproject mi_proyecto
cd mi_proyecto

Crea una aplicación (por ejemplo, “web”):

python manage.py startapp web

3. Integrar Tailwind CSS

Para integrar Tailwind en Django, usaremos el paquete django-tailwind.

3.1 Instalar django-tailwind

Dentro del entorno virtual, instala el paquete:

pip install django-tailwind

3.2. Configurar django-tailwind

Agrega ‘tailwind’ y la aplicación de tema a la lista de INSTALLED_APPS en mi_proyecto/settings.py:

INSTALLED_APPS = [
    # ...
    'tailwind',
    'theme',  # Este será el nombre de tu app de tema
    # ...
]

Define el nombre de la app de Tailwind en el settings:

TAILWIND_APP_NAME = 'theme'

Crea la aplicación de tema:

python manage.py tailwind init theme

3.3. Configurar y compilar Tailwind

Instala las dependencias de Node.js para Tailwind:

cd theme
npm install

Compila los archivos CSS:

npm run dev

4. Ejecutar el proyecto

Regresa a la carpeta raíz y levanta el servidor de desarrollo:

cd ..
python manage.py runserver

Abre el navegador en http://127.0.0.1:8000 para ver tu aplicación en acción.

Conclusión

Con estos pasos ya tienes un proyecto Django configurado e integrado con Tailwind CSS. Puedes continuar personalizando los estilos y desarrollando tu aplicación.