장고 테일윈드

이 튜토리얼에서는 새 프로젝트에서 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을 하나의 파일에 담을 수 있습니다. 상단의 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

순풍 구성

Tailwind 문서에는 몇 가지만 변경하면 따라갈 수 있는 설치 가이드가 있습니다. 프로젝트 디렉터리에서 새 터미널 세션을 엽니다. 궁극적으로 두 개를 실행해야 합니다. 하나는 Django 서버이고 다른 하나는 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 웹사이트의 경로를 약간 변경하여 src/styles.css 파일에서 찾고 dist/styles.css로 출력합니다.

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

이 기능을 사용해 보려면 일부 Tailwind 클래스로 base.html 템플릿 파일을 업데이트하세요. 상단에 load static 태그를 추가하고 새 스타일시트에 연결하는 것이 중요합니다. 그런 다음 제목을 빨간색으로, 아래 텍스트를 파란색으로 만드는 기본 클래스를 추가합니다.

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

홈페이지를 강제 새로고침하세요.

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

웹페이지를 새로 고쳐 모든 것이 제대로 작동하는지 확인하세요.

결론

지금까지 살펴본 것처럼 Tailwind는 Django와 잘 작동합니다. 추가 기능을 사용하려면 django-browser-reload를 확인하여 개발 중에 브라우저를 자동으로 다시 로드하면 항상 강제로 새로 고칠 필요가 없습니다. Tailwind와 Django를 통합하는 또 다른 접근 방식을 제공하는 잘 관리되는 타사 패키지인 django-tailwind도 있습니다.

위 내용은 장고 테일윈드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!