ジャンゴ・テイルウィンド-CSSチュートリアル-php.cn

ジャンゴ・テイルウィンド

PHPz

リリース： 2024-08-29 06:30:31

オリジナル

1195 人が閲覧しました

このチュートリアルでは、新しいプロジェクトで Django と TailwindCSS を最初から構成する方法を説明します。

ジャンゴのセットアップ

.venv という名前の新しい仮想環境を作成します。

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

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

ログイン後にコピー

次に、Django をインストールし、django_project という新しいプロジェクトを作成します。

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

ログイン後にコピー

mkdir コマンドを使用して、コマンドラインからプロジェクトレベルのテンプレートディレクトリを作成します。

(.venv) $ mkdir templates

ログイン後にコピー

テンプレートは各アプリ内ではなくここに保存します。ただし、settings.py の TEMPLATES 構成を更新して、それらの場所を Django に伝える必要があります。

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

ログイン後にコピー

templates/base.html ファイルを作成します。

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

ログイン後にコピー

「 django_project/urls.py 」を上手に使えば、ビューと URL を 1 つのファイルに含めることができます。上部で TemplateView をインポートし、テンプレート、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
]

ログイン後にコピー

runserver コマンドを使用して、ホームページが動作していることを確認します。

(.venv) $ python manage.py runserver

ログイン後にコピー

Django Tailwind

追い風構成

Tailwind のドキュメントには、いくつかの変更を加えるだけで従うことができるインストールガイドが含まれています。プロジェクトディレクトリから新しいターミナルセッションを開きます。最終的には 2 つを実行する必要があります。1 つは Django サーバーで、もう 1 つは Node.

新しいターミナルウィンドウで、コンピューターに Node がインストールされていることを確認します。 node-vで確認できます。

$ node -v
v20.17.0

ログイン後にコピー

Node と Tailwind を一緒に使用するための package.json ファイルを作成します。 -y フラグを追加すると、すべてのデフォルトに「はい」と表示されます。

$ npm init -y

ログイン後にコピー

これは、結果として得られる package.json ファイルです。

{
  "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"
}

ログイン後にコピー

npm 経由で Tailwind をインストールします。

$ npm install -D tailwindcss

ログイン後にコピー

これにより、node_modules ディレクトリが作成されます。次に、tailwind.config.js ファイルを作成します。

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

ログイン後にコピー

これで、tailwind.config.js ファイルが完成しました。テンプレートディレクトリのパスを追加します。

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

ログイン後にコピー

Django プロジェクトで、静的ディレクトリと src というサブディレクトリを作成します。

$ mkdir static
$ mkdir static/src

ログイン後にコピー

STATICFILES_DIRS 構成を更新して、ここでファイルを探すように Django に指示する必要があります。

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

ログイン後にコピー

次に、static/src/styles.css という名前の新しい CSS ファイルを作成し、それに @tailwind ディレクティブを追加します。

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

ログイン後にコピー

次のステップは、Tailwind CLI ビルドプロセスを開始することです。テンプレートファイルをスキャンしてクラスを探し、必要な CSS を構築します。ここでは、Tailwind Web サイトからのパスをわずかに変更して、src/styles.css ファイルを参照し、dist/styles.css に出力するようにしました。

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

ログイン後にコピー

試してみるには、いくつかの Tailwind クラスを使用して、base.html テンプレートファイルを更新します。先頭にロード静的タグを追加し、新しいスタイルシートにリンクすることが重要です。次に、タイトルを赤、下のテキストを青にする基本クラスを追加します。

<!-- 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>

ログイン後にコピー

ホームページをハードリフレッシュします。

Django Tailwind

Tailwind が適切にインストールされていることを示すテキストの更新が表示されます。

監視:css スクリプト

基本的なインストールは完了していますが、いくつかの追加機能によって状況が大幅に改善されることがすぐにわかります。

第一に、ノードを実行するための大きくて長いコマンドを覚えたくありません。これを「watch:css」で始まるスクリプトとして package.json ファイル内に置くことができます。

// 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"
  }
}

ログイン後にコピー

Node が実行されているターミナルで、Ctrl+c を押して停止します。「npm run watch:css」と入力すると、以前と同じように起動するはずです。

$ npm run watch:css

ログイン後にコピー

Web ページを更新して、すべてが引き続き機能することを確認します。

結論

これまで見てきたように、Tailwind は Django とうまく連携します。さらに便利な機能が必要な場合は、開発中にブラウザを自動的にリロードする django-browser-reload をチェックしてください。これにより、常にハードな更新を行う必要がなくなります。また、よく管理されているサードパーティパッケージ django-tailwind もあり、Tailwind と Django を統合するための別のアプローチを提供します。

以上がジャンゴ・テイルウィンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。