¿Cómo usar TailwindCSS con Django?

Si hallas algún problema con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.

Solución:

TL;RD

1. Instale TailwindCSS dentro de su proyecto Django, como cualquier proyecto JS con npm
2. Use un paquete de servidor de recarga en vivo con Django
3. Agregue la configuración de purgeCSS antes de implementar

Explicación más detallada

1 – El proceso de compilación de TailwindCSS

Cree un nuevo directorio dentro de su proyecto Django, en el que instalará tailwindCSS como en cualquier configuración de proyecto Vanilla JS:

cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js

En este archivo postcss.config.js, agregue:

module.exports = 
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]

mkdir css; touch css/tailwind.css

En este archivo tailwind.css, agregue al menos esto:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ahora, agregue un script en su archivo jstoolchain/packages.json para crear el proceso de compilación y especificar el archivo de salida, como:

  "scripts": 
    "build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
  

Ahora, corre;

npm run-script build

Esto debería ejecutarse sin errores, y tailwind-output.css ahora debería estar lleno con miles de líneas. Ahora puede usar las clases tailwindCSS, incluyendo el archivo css generado en un archivo de plantilla de Django junto con la llamada de Django para cargar el static archivos:

% load static %


  

2 – Manejo de la recarga automática localmente

Lo que falta ahora para facilitar el desarrollo es recargar automáticamente el servidor de desarrollo de django cuando se cambia y se guarda un archivo HTML. Para esto, instalé django-livereload-server.

Simplemente siga las instrucciones de configuración, esto funcionará como se esperaba, sin ninguna configuración especial.

3 – El proceso purgeCSS

Cuando esté listo para implementar, para asegurarse de que el archivo de salida CSS no se llene de clases inútiles, vaya al archivo jstoolchain/tailwind.config.js y agregue:

  purge: 
    enabled: true,
    content: ['../your-django-folder/path-to-your-templates/**/*.html'],
  ,

Ahora, ejecutar el script de compilación debería producir una salida CSS mucho más pequeña, un archivo listo para producción.

---

Ideas para mejorar el flujo de trabajo

• El script de compilación podría ejecutarse automáticamente cuando se editan los archivos de viento de cola de entrada (css, js)
• PurgeCSS podría ejecutarse automáticamente cuando sea necesario, en lugar de agregarlo o eliminarlo manualmente.
• ¿Alguna otra idea?

Django-Tailwind CSS es un paquete muy bueno y funciona bien para mí. Siga los documentos correctamente y estará bien.

Antes de comenzar, asegúrese de tener npm correctamente instalado en su sistema

Inicio rápido

1. Instale el paquete python django-tailwind desde pip

pip install django-tailwind

Alternativamente, puede descargar o clonar este repositorio y ejecutarpip install -e ..

2. Agregar tailwind a INSTALLED_APPS en configuración.py

3. Cree una aplicación Django compatible con viento de cola, me gusta llamarlo theme:

python manage.py tailwind init theme

4. Añade tu recién creado theme aplicación a INSTALLED_APPS en configuración.py

5. En configuración.pyregistre la aplicación Tailwind agregando lo siguiente
   string:

TAILWIND_APP_NAME = 'theme'

6. Ejecute un comando para instalar todas las dependencias necesarias para Tailwind CSS:

python manage.py tailwind install

7. Ahora, ve y comienza Tailwind en modo de desarrollo:

python manage.py tailwind start

8. Django Tailwind viene con una plantilla base.html simple que se puede encontrar en yourtailwindappname/templates/base.html. Siempre puede ampliarlo o eliminarlo si tiene un diseño propio.

9. Si no estás usando base.html plantilla provista con Django Tailwind, agregue estilos.min.css a tu propio base.html archivo de plantilla:

Ahora debería poder usar las clases CSS de Tailwind en su html.

Para crear una versión de producción de CSS, ejecute:

python manage.py tailwind build

---

Para el recarga en vivoesto lo maneja:
python manage.py tailwind start

Para el proceso de construcciónesto lo maneja:
python manage.py tailwind build

Para el Proceso PurgarCSSver muestra simple en los documentos

Para Configuración de ruta de NPMerror de uración (especialmente en Windows), ver documentos

Si entiendes que ha resultado de ayuda nuestro artículo, sería de mucha ayuda si lo compartieras con más entusiastas de la programación así contrubuyes a extender esta información.

---

---

Utiliza Nuestro Buscador