Instalación de Django Tailwind

Primero que todo, obtendremos toda la información de los documentos oficiales de esta dependencia. Link

Paso 1:

Instala la dependencia django-tailwind, en la terminal del programa. Hay 2 tipos de instalación:

Básica:

  python -m pip install 'django-tailwind'
  

Reload:

  python -m pip install 'django-tailwind[reload]'
  

La principal diferencia se sitúa en la capacidad de actualizar automáticamente cualquier cambio de los estilos del programa que estaremos creando.

Paso 2:

Agregaremos Tailwind a nuestras apps, para permitirnos utilizarla en la línea de comandos:

  INSTALLED_APPS = [
      # other Django apps
      'tailwind',
  ]
  

Paso 3:

Iniciaremos el proceso de Tailwind en nuestro proyecto, con el siguiente comando:

  python manage.py tailwind init
  

Te va a preguntar cómo quieres llamar a la nueva app que se encargará de gestionar todos tus archivos estáticos y plantillas (por defecto se llama Theme).

Paso 4:

Agregamos la app a nuestro settings.py:

  INSTALLED_APPS = [
      # other Django apps
      'tailwind',
      'theme',
  ]
  

Paso 5:

Configuraremos la generación de la app de Tailwind en settings.py:

  TAILWIND_APP_NAME = 'theme'
  INTERNAL_IPS = [
      "127.0.0.1",
  ]
  

Se agrega la configuración del Internal_IPs para que Tailwind siempre pueda saber dónde hará el proceso de observación:

• Permite que el compilador de Tailwind detecte cambios en tus archivos CSS.


• Habilita el hot-reloading (recarga automática) cuando haces cambios en tus estilos.


• Asegura que el servidor de desarrollo de Tailwind solo sea accesible desde tu máquina local.

Paso 6:

Configuración de los archivos estáticos y sus URLs:

Opción 1:

  STATIC_URL = 'static/'
  STATICFILES_DIRS = [
      BASE_DIR / "theme/static",  # Asegúrate de que esta ruta sea correcta
  ]
  STATIC_ROOT = BASE_DIR / "staticfiles"
  

Opción 2:

  import os
  STATIC_URL = 'static/'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'theme', 'static'),
  ]
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  

¿Cuál es la diferencia? Usando os.path.join, podremos cambiar ciertas rutas sin tener que alterar el código.

Paso 7:

NPM_BIN_PATH configuración: Cuando instalas django-tailwind, este sistema suele usar dos compiladores: Node para Tailwind y Python para todos los otros procesos. Por ende, cuando necesitemos compilar Tailwind, el sistema tiene que saber dónde se ubica:

  C:\Users\USUARIO>where npm

  # Resultado por lo general será
  C:\Program Files\nodejs\npm
  C:\Program Files\nodejs\npm.cmd
  

Posteriormente, crearemos esta ruta en settings.py:

  NPM_BIN_PATH = 'C:/Program Files/nodejs/npm.cmd'
  # ¡Siempre recuerda cambiar los backslashes por slashes!
  

Paso 8:

Finalmente, usa el último comando para mantener encendido el proceso en segundo plano en algún otro terminal:

  python manage.py tailwind start
  

Pasos opcionales si se usa el hot reload:

Paso 7.5:

Configuración de hot reload, implementando los siguientes cambios:

Installed Apps:

  INSTALLED_APPS = [
      'tailwind',
      'theme',
      'django_browser_reload',
  ]
  

Middleware:

  Version 1:
  MIDDLEWARE = [
      # ...
      "django_browser_reload.middleware.BrowserReloadMiddleware",
      # ...
  ]

  Version 2 (preferida):
  MIDDLEWARE = [
      # ... otros middlewares
  ]
  if not PRODUCTION:
      MIDDLEWARE += ["django_browser_reload.middleware.BrowserReloadMiddleware"]
  

URLs del proyecto:

  from django.urls import include, path

  urlpatterns = [
      # otras rutas
      path("__reload__", include("django_browser_reload.urls")),
  ]