Introduction
Django est un framework web puissant pour Python, tandis que Tailwind CSS est un framework CSS moderne, utilitaire-first, qui permet de créer rapidement des interfaces épurées.
L’intégration de Tailwind avec Django permet de combiner la robustesse du backend Python avec la souplesse du design moderne.
Ce guide vous accompagne pas à pas pour installer et configurer Tailwind CSS dans un projet Django.
Prérequis
-
Python 3.8+
-
Django installé (pip install django)
-
Node.js et npm installés (node -v et npm -v)
-
Un projet Django existant
Étape 1 : Installer Tailwind CSS et ses dépendances
Dans le répertoire de votre projet Django :
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Deux fichiers seront créés :
-
tailwind.config.js
-
postcss.config.js
Étape 2 : Configuration de Tailwind
Modifier tailwind.config.js :
module.exports = {
content: [
'./templates/**/*.html',
'./**/templates/**/*.html',
'./static/js/**/*.js',
],
theme: {
extend: {},
},
plugins: [],
}
Étape3 : Créer le fichier CSS
Dans le dossier static/css/, créez un fichier tailwind.css contenant :
@tailwind base;
@tailwind components;
@tailwind utilities;
Puis compilez avec : npx tailwindcss -i ./static/css/tailwind.css -o ./static/css/style.css --watch
Cela créera le fichier style.css final à inclure dans vos templates.
Étape 4 : Intégrer Tailwind à Django
Structure des fichiers
/static/
css/
└── style.css ← généré automatiquement
/templates/
base.html
Inclure dans base.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>{% block title %}Mon site{% endblock %}</title>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Étape 5 : Lancer le serveur et observer
-
Compilez Tailwind en arrière-plan : npx tailwindcss -i ./static/css/tailwind.css -o ./static/css/style.css --watch
2. Lancez le serveur Django : python manage.py runserver
3.Accédez à http://127.0.0.1:8000 et admirez les styles générés.
Conclusion
Grâce à cette configuration, vous pouvez maintenant :
Intégrer ces deux outils améliore considérablement la rapidité de développement et la maintenabilité de vos projets web.