¿Cómo usar todas las funciones de TailwindCSS en un proyecto de 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.
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/
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
1. Vaya a la carpeta deseada para la instalación. En mi caso:
mkdir static/css/tailwind cd static/css/tailwind2. Crear paquete.json:
npm init -y3. Instale Tailwind a través de npm:
npm i tailwindcss4. Cree un archivo css y agregue el código de la documentación oficial de Tailwind :
@tailwind base; @tailwind components; @tailwind utilities;5. Abra package.json y realice este cambio en "scripts":
"scripts": { "build:css": "tailwind build tw.css -o ../tailwind.css" },6. Ejecute el script escrito
npm run build:css tw.css es la ubicación del archivo que creamos en el cuarto paso. Y ../tailwind.css es la ubicación del archivo en el que queremos que se genere el css de Tailwind. Entonces, después de ejecutar este comando, tendremos un archivo tailwind.css con la base, los componentes y las utilidades de Tailwind.
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
Encontré este increíble repositorio en github => https://github.com/timonweb/django-tailwind Se puede inicializar simplemente con python manage.py tailwind start
Características:
Instale el paquete django-tailwind a través de pip:
python -m pip install django-tailwind
Alternativamente, puede instalar la última versión de desarrollo a través de:
python -m pip install git+https://github.com/timonweb/django-tailwind.git
Agregue 'tailwind' a INSTALLED_APPS en settings.py:
INSTALLED_APPS = [ 'tailwind', ]
Cree una aplicación Django compatible con Tailwind CSS, me gusta llamarlo tema:
python manage.py tailwind init
Agregue su aplicación 'tema' recién creada a INSTALLED_APPS en settings.py:
INSTALLED_APPS = [ 'tailwind', 'theme' ]
Registre la aplicación 'tema' generada agregando la siguiente línea al archivo settings.py:
TAILWIND_APP_NAME = 'theme' Asegúrese de que la lista INTERNAL_IPS esté presente en el archivo settings.py y contenga la dirección IP 127.0.0.1 :
INTERNAL_IPS = [ "127.0.0.1", ]
Instale las dependencias de Tailwind CSS ejecutando el siguiente comando:
python manage.py tailwind install
Django Tailwind viene con una plantilla base.html simple ubicada en your_tailwind_app_name tailwind_app_name/templates/base.html . Siempre puede ampliarlo o eliminarlo si ya tiene un diseño.
Si no está utilizando la plantilla base.html que viene con Django Tailwind, agregue {% tailwind_css %} a la plantilla base.html:
{% load tailwind_tags %} <head> {% tailwind_css %} </head>
La etiqueta {% tailwind_css %} incluye la hoja de estilo de Tailwind.
También agreguemos y configuremos django_browser_reload, que se encarga de las actualizaciones automáticas de página y css en el modo de desarrollo. Agrégalo a INSTALLED_APPS en settings.py:
INSTALLED_APPS = [ 'tailwind', 'theme', 'django_browser_reload' ]
Permaneciendo en settings.py, agregue el middleware:
MIDDLEWARE = [ "django_browser_reload.middleware.BrowserReloadMiddleware", ]
El middleware debe aparecer después de cualquiera que codifique la respuesta, como GZipMiddleware de Django. El middleware inserta automáticamente la etiqueta de script requerida en las respuestas HTML antes de que DEBUG sea True.
Incluya la URL django_browser_reload en su raíz url.py:
from django.urls import include, path
urlpatterns = [ path("__reload__/", include("django_browser_reload.urls")), ]
Finalmente, debería poder usar las clases CSS de Tailwind en HTML. Inicie el servidor de desarrollo ejecutando el siguiente comando en su terminal:
python manage.py tailwind start
El estilo Vimesh es una pequeña biblioteca de javascript con todas las funciones alternativa a Tailwind CSS 2.0. Simplemente agregue una línea a su página html, se encargará del resto. https://github.com/vimeshjs/estilo-vimesh
inplace .main.scss para agregar sus estilos personalizados.Clonar el proyecto
https://github.com/MindMansion/DjangoTailwindStarter
Desde el directorio de tu proyecto Django
mkdir theme cd theme npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme npm install npm run build npm run watch Un archivo global.css debería estar listo para usar en su directorio estático.