Django vent arrière

Ce tutoriel montre comment configurer Django et TailwindCSS à partir de zéro dans un nouveau projet.

Configuration de Django

Créez un nouvel environnement virtuel appelé .venv.

# Windows
$ python -m venv .venv
$ .venv\Scripts\Activate.ps1
(.venv) $

# macOS/Linux
$ python3 -m venv .venv
$ source .venv/bin/activate
(.venv) $

Ensuite, installez Django et créez un nouveau projet appelé django_project.

(.venv) $ python -m pip install django
(.venv) $ django-admin startproject django_project .

Créez un répertoire de modèles au niveau du projet à partir de la ligne de commande à l'aide de la commande mkdir.

(.venv) $ mkdir templates

Nous stockerons nos modèles ici plutôt que dans chaque application. Cependant, nous devons indiquer à Django où les trouver en mettant à jour la configuration TEMPLATES dans settings.py.

# django_project/settings.py
TEMPLATES = [
    {
        ...
        "DIRS": [BASE_DIR/"templates"],  # new
        ...
    }
]

Créez un fichier templates/base.html.

<!-- templates/base.html -->
<h1>Hello, World</h1>

Si nous utilisons intelligemment ' django_project/urls.py ', nous pouvons inclure la vue et les URL dans un seul fichier. Importez TemplateView en haut, puis définissez un chemin qui pointe vers le modèle, base.html.

# django_project/urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView  # new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", TemplateView.as_view(template_name="base.html"),),  # new
]

Utilisez la commande runserver pour confirmer que la page d'accueil fonctionne.

(.venv) $ python manage.py runserver

Configuration du vent arrière

La documentation Tailwind contient un guide d'installation que nous pouvons suivre avec seulement quelques modifications. Ouvrez une nouvelle session de terminal depuis le répertoire du projet : nous aurons finalement besoin d'en avoir deux en cours d'exécution, une avec notre serveur Django et une avec Node.

Dans la nouvelle fenêtre de terminal, assurez-vous que Node est installé sur votre ordinateur. Vous pouvez vérifier avec node-v.

$ node -v
v20.17.0

Créez un fichier package.json pour utiliser Node et Tailwind ensemble. Ajoutez l'indicateur -y pour dire oui à toutes les valeurs par défaut.

$ npm init -y

Voici le fichier package.json résultant.

{
  "name": "django-tailwind",
  "version": "1.0.0",
  "description": "How to configure Django and Tailwind from scratch in a new project.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Installez Tailwind via npm.

$ npm install -D tailwindcss

Cela crée un répertoire node_modules. Créez ensuite un fichier tailwind.config.js.

$ npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.js

Nous avons maintenant un fichier tailwind.config.js. Ajoutez-y des chemins pour notre répertoire de modèles.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/"],  // updated line here!
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans le projet Django, créez un répertoire statique et un sous-répertoire appelé src.

$ mkdir static
$ mkdir static/src

Nous devons dire à Django de rechercher ici les fichiers en mettant à jour la configuration STATICFILES_DIRS.

# settings.py
STATICFILES_DIRS = [BASE_DIR / "static",]  # new

Créez ensuite un nouveau fichier CSS appelé static/src/styles.css et ajoutez-y les directives @tailwind.

/* static/src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

L'étape suivante consiste à démarrer le processus de création de Tailwind CLI. Il analysera nos fichiers modèles pour les classes et créera le CSS nécessaire. Nous avons légèrement modifié les chemins du site Web Tailwind ici afin qu'ils apparaissent dans le fichier src/styles.css et sortent vers dist/styles.css.

$ npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch

Pour l'essayer, mettez à jour le fichier modèle base.html avec certaines classes Tailwind. Il est important d'ajouter la balise statique de chargement en haut et également de créer un lien vers la nouvelle feuille de style. Ensuite, nous ajoutons des classes de base pour rendre le titre rouge et le texte en dessous bleu.

<!-- templates/base.html -->
{% load static %}
<link href="{% static 'dist/styles.css' %}" rel="stylesheet">
<h1 class="text-red-600">Hello, World</h1>
<p class="text-blue-600">More text</p>

Actualiser la page d'accueil.

Vous pouvez voir les mises à jour du texte indiquant que Tailwind est correctement installé.

regarder:script CSS

Nous avons une installation de base opérationnelle, mais vous constaterez bientôt que quelques fonctionnalités supplémentaires améliorent considérablement les choses.

Premièrement, nous ne voulons pas nous souvenir de cette grosse et longue commande pour faire fonctionner Node. Nous pouvons le mettre dans le fichier package.json sous la forme d'un script commençant par "watch:css".

// package.json
{
  "name": "django-tailwind",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch:css": "npx tailwindcss -i ./static/src/styles.css -o ./static/dist/styles.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "tailwindcss": "^3.4.10"
  }
}

Dans le terminal où Node est exécuté, arrêtez-le avec Ctrl+c. Tapez npm run watch:css et cela devrait démarrer comme avant.

$ npm run watch:css

Actualisez la page Web pour vous assurer que tout fonctionne toujours.

Conclusion

Comme nous l'avons vu, Tailwind fonctionne bien avec Django. Pour des avantages supplémentaires, consultez django-browser-reload pour recharger automatiquement votre navigateur en cours de développement afin que vous n'ayez pas à effectuer des actualisations matérielles à tout moment. Il existe également un package tiers bien entretenu, django-tailwind, qui propose une autre approche pour intégrer Tailwind à Django.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!