Published Nov 11th, 3:46 a.m. 7 min read

Tích hợp Tailwind CSS với Django: Hướng dẫn chi tiết kèm ví dụ

Trong phát triển web hiện đại, việc lựa chọn công nghệ phù hợp là rất quan trọng vì nó ảnh hưởng đến cả quy trình và kết quả của dự án. Sử dụng Django làm framework backend và Tailwind CSS làm framework CSS utility-first mang đến một cách hiệu quả để tạo ra các ứng dụng web responsive và trực quan hấp dẫn.

Bài viết này sẽ giải thích lý do tại sao Django và Tailwind CSS hoạt động tốt cùng nhau, cách bắt đầu một dự án Django, cách dễ dàng thêm Tailwind CSS và cách tăng tốc phát triển với Prettier để định dạng class tốt hơn.

Tổng quan nhanh về Django

Django là một web framework Python mã nguồn mở, đầy đủ tính năng, tuân theo phương pháp "batteries-included". Django hướng đến việc giúp quá trình phát triển các website phức tạp, dựa trên cơ sở dữ liệu trở nên nhanh chóng và dễ dàng nhất có thể bằng cách cung cấp nhiều chức năng tích hợp như ORM, hệ thống xác thực, bảng quản trị và nhiều hơn nữa.

Django cho phép phát triển nhanh chóng bằng cách tập trung vào việc viết các phần độc đáo của ứng dụng thay vì lãng phí thời gian viết nhiều code lặp lại. Lý do cho sự phổ biến của nó là nó tuân theo mẫu thiết kế MVT, giúp phân tách rõ ràng các mô hình dữ liệu, view và template.

Trong Django, bảo mật là tối quan trọng: nó bảo vệ chống lại SQL injection, cross-site scripting và cross-site request forgery ngay từ đầu. Django có khả năng mở rộng tốt và linh hoạt - nó phù hợp cho cả các dự án nhỏ và các ứng dụng web lớn, phức tạp, và đó là lý do tại sao nó được sử dụng bởi các trang web lớn như Instagram và Pinterest.

Tailwind CSS là gì?

Tailwind CSS là một framework CSS utility-first nổi tiếng. Nó cho phép bạn tạo kiểu trực tiếp trong HTML, nhờ các class được xác định trước. Không giống như các framework CSS khác cung cấp các component được xây dựng sẵn, Tailwind cung cấp các utility class cấp thấp này cho phép bạn tạo hệ thống thiết kế của riêng mình.

Do đó, điều này giúp việc tạo ra các thiết kế responsive độc đáo trở nên dễ dàng vì không cần phải làm nhiều với CSS tùy chỉnh.

Tại sao Django và Tailwind lại kết hợp tốt với nhau như vậy?

Sự kết hợp giữa Django và Tailwind CSS mang đến một cách liền mạch để xây dựng các ứng dụng mạnh mẽ, đầy đủ tính năng. Dưới đây là lý do:

Phát triển nhanh chóng: Khả năng backend của Django cho phép các nhà phát triển tạo ra các ứng dụng mạnh mẽ một cách nhanh chóng, trong khi Tailwind CSS giúp hợp lý hóa quy trình tạo kiểu với phương pháp utility-first.
Thiết kế tùy chỉnh: Với Tailwind, bạn không bị giới hạn trong các kiểu được xác định trước. Bạn có thể tạo ra một thiết kế nhất quán, độc đáo, dễ dàng mở rộng khi dự án của bạn phát triển.
Phân tách mối quan tâm: Hệ thống template của Django hoạt động song song với Tailwind CSS, đảm bảo sự phân tách rõ ràng giữa logic backend và kiểu dáng frontend.

Làm thế nào để khởi tạo một dự án Django?

Cài đặt Django : Cài đặt Django bằng pip:

 pip install django

Tạo một dự án Django: Sử dụng lệnh Django admin để tạo một dự án mới:

 django-admin startproject myproject

Điều hướng đến thư mục dự án của bạn:

 cd myproject

Biến đổi settings.py:

Trong TEMPLATESphần cài đặt, thêm một thư mục templates:

  "DIRS": [BASE_DIR / "templates"],

Thêm thư mục static cho các tập tin tĩnh của bạn:

  STATICFILES_DIRS = [BASE_DIR / "static"]

Làm thế nào để tích hợp Tailwind CSS với Django?

Cài đặt Tailwind CSS: Đảm bảo Node.js đã được cài đặt, sau đó chạy:

 npm install -D tailwindcss
 npx tailwindcss init

Thiết lập Tailwind CSS: Trong thư mục static/css của bạn, hãy tạo một main.csstệp có nội dung sau:

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

Sửa đổi tailwind.config.js: Điều chỉnh phần nội dung để bao gồm các tệp templates/*.html, đảm bảo Tailwind CSS tạo ra các kiểu cần thiết.

 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ["./templates/**/*.html", "./**/templates/**/*.html"],
     darkMode: "media",
     theme: {
         extend: {},
     },
     plugins: [],
 };

Thêm một tập lệnh xây dựng : Cập nhật package.json để bao gồm một tập lệnh xây dựng:

 "scripts": {  "watch:css": "tailwindcss build static/css/main.css -o static/output.css -w"}

Biên dịch Tailwind CSS:

 npm run watch:css

Xây dựng ứng dụng Chat Bubble

Để tạo ứng dụng Chat Bubble, hãy tạo một ứng dụng Django mới bằng lệnh: "django-admin startapp chat". Trong file chat/views.py, tạo một view đơn giản:

from django.shortcuts import render

def chat(request):
    return render(request, "chat.html")

Trong chat/urls.py, định nghĩa URL pattern cho view:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.chat, name="chat"),
]

Trong file urls.py của dự án, hãy thêm URL của ứng dụng:

from django.urls import include, path

urlpatterns = [
    path("", include("chat.urls")),
]

Tạo file templates/base.html làm template cơ sở cho ứng dụng:

 {% load static %}

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>My Django App with Tailwind</title>
      <link rel="stylesheet" href="{% static 'css/output.css' %}" />
    </head>

    <body class="h-screen bg-slate-300 dark:bg-slate-400">
      <section class="container mx-auto flex flex-col items-center">
        <h1 class="mb-4 mt-10 text-6xl font-bold text-blue-500 dark:text-blue-200" >
          Chat Bubble
        </h1>
        {% block content %} {% endblock %}
      </section>
    </body>
  </html>

Trong file templates/chat.html, mở rộng template cơ sở:

 {% extends "base.html" %}

    {% block content %}
    <div class="flex items-start gap-2.5">
        <img class="w-8 h-8 rounded-full" src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="Jhon  image">
        <div class="flex flex-col gap-1 w-full max-w-[320px]">
            <div class="flex items-center space-x-2 rtl:space-x-reverse">
                <span class="text-sm font-semibold text-gray-900 dark:text-white">Jhon Doe</span>
                <span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
            </div>
            <div
                class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
                <p class="text-sm font-normal text-gray-900 dark:text-white"> That's awesome. I think our users will really
                    appreciate the improvements.</p>
            </div>
            <span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
        </div>
    </div>
    {% endblock %}

Cuối cùng, chạy server phát triển bằng lệnh: "python manage.py runserver".

Làm thế nào để sử dụng Prettier để định dạng lớp?

Để giữ cho các lớp CSS Tailwind của bạn gọn gàng và có tổ chức, bạn có thể tích hợp Prettier vào quy trình làm việc của mình.

Cài đặt Prettier và Plugin Tailwind:

 npm install --save-dev prettier prettier-plugin-tailwindcss

Cấu hình Prettier: Tạo một .prettierrctệp trong thư mục gốc của dự án:

 {  "plugins": ["prettier-plugin-tailwindcss"]}

Định dạng khi lưu: Thiết lập trình soạn thảo mã để định dạng tệp tự động bằng Prettier khi lưu.

Kết luận

Sử dụng Tailwind CSS với Django là một cách tuyệt vời để làm cho các ứng dụng web của bạn trông đẹp mắt và hoạt động tốt trên các thiết bị khác nhau, đồng thời bạn tận dụng được nhiều tính năng của Django.

Thiết lập này không chỉ giúp tăng năng suất mà còn giúp bạn tuân theo các phương pháp tạo kiểu và thiết kế tốt. Đây là kho lưu trữ nơi bạn có thể tìm thêm chi tiết hoặc xem code đầy đủ: ts-django-tailwindcss. Tôi hy vọng hướng dẫn này sẽ giúp bạn tích hợp Django với Tailwind CSS một cách dễ dàng nhất

Django Tailwind Css