¿Cómo usar todas las funciones de TailwindCSS en un proyecto Django (no solo el CDN), incluido un flujo de trabajo limpio con recarga automática y el paso purgeCSS para estar listo para la producción?
Al buscar en Google, encontré un paquete de python llamado django-tailwind, pero realmente no me ayudó en el proceso.
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.jsEn este archivo postcss.config.js, agregue:
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] } mkdir css; touch css/tailwind.cssEn este archivo tailwind.css, agregue al menos esto:
@tailwind base; @tailwind components; @tailwind utilities;Ahora, agregue un script en su archivo jstoolchain/package.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 los archivos estáticos:
{% load static %} <head> <link rel="stylesheet" href="{% static "css/tailwind-output.css" %}"> </head>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.
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.
EDITAR : Tailwind 2.1 viene con un compilador Just-In-Time opcional. La sección de purge seguirá siendo necesaria, pero no necesitará ejecutar un script de purga antes de la implementación, entre muchas otras ventajas. Echa un vistazo aquí para más información
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
pip install django-tailwind
Alternativamente, puede descargar o clonar este repositorio y ejecutar pip install -e ..
Agregue viento de tailwind a INSTALLED_APPS en settings.py
Cree una aplicación Django compatible con viento de cola, me gusta llamarlo theme :
python manage.py tailwind init theme
Agregue su aplicación de theme recién creada a INSTALLED_APPS en settings.py
En settings.py , registre la aplicación Tailwind agregando la siguiente cadena:
TAILWIND_APP_NAME = 'theme'
python manage.py tailwind install
python manage.py tailwind start
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.
Si no está utilizando la plantilla base.html provista con Django Tailwind, agregue styles.min.css a su propio archivo de plantilla base.html :
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 la recarga en vivo , esto lo maneja: python manage.py tailwind start
Para el proceso de compilación , esto lo maneja: python manage.py tailwind build
Para el proceso PurgeCSS , vea una muestra simple en los documentos
Para el error de configuración de la ruta NPM (especialmente en Windows), consulte los documentos
Un poco tarde, pero recientemente escribí una publicación de blog sobre esto, enfocada en reemplazar Gulp y Bootstrap en Django Cookiecutter con Webpack y TailwindCSS. Este es el enlace: https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/