Как интегрировать Tailwind с Django — с примерами кода

В современной веб-разработке выбор правильной технологии имеет решающее значение, поскольку она влияет как на процесс, так и на результат ваших проектов. Использование Django в качестве серверной платформы и Tailwind CSS в качестве CSS-платформы, ориентированной в первую очередь на утилиты, предлагает эффективный способ создания адаптивных и визуально привлекательных веб-приложений.

В этой статье будет рассказано, почему Django и Tailwind CSS хорошо работают вместе, как запустить проект на Django, как легко добавить Tailwind CSS и как ускорить разработку с помощью Prettier для лучшего форматирования классов.

Оглавление

Краткий обзор Django

Django - это полнофункциональный веб-фреймворк на Python с открытым исходным кодом, который основан на использовании батареек. Django стремится сделать разработку сложных веб-сайтов, управляемых базами данных, максимально быстрой и простой, предоставляя множество встроенных функций, таких как ORM, система аутентификации, панель администратора и многое другое. Django обеспечивает быструю разработку, сосредоточившись на написании уникальных компонентов приложения, а не тратя время на написание большого количества шаблонного кода.

Причина его популярности в том, что он соответствует шаблону проектирования MVT, который позволяет четко разделять модели данных, представления и шаблоны. В Django безопасность имеет первостепенное значение: она защищает от SQL-инъекций, межсайтового написания сценариев и подделки межсайтовых запросов "из коробки". Django хорошо масштабируется и отличается гибкостью – он подходит как для небольших проектов, так и для больших сложных веб-приложений, и именно поэтому его используют такие крупные сайты, как Instagram и Pinterest.

Что такое Tailwind CSS?

Общеизвестно, что Tailwind CSS - это CSS-фреймворк, основанный на использовании утилит. Он позволяет стилизовать элементы непосредственно в вашем HTML-коде, благодаря заранее определенным классам. В отличие от других CSS-фреймворков, предлагающих готовые компоненты, Tailwind предлагает эти низкоуровневые классы утилит, которые позволяют создавать собственную систему дизайна. Таким образом, создание уникальных адаптивных дизайнов не требует особых усилий, поскольку с пользовательским CSS практически ничего не нужно делать.

Почему Django и Tailwind так хорошо работают вместе?

Сочетание Django и Tailwind CSS обеспечивает простой способ создания надежных полнофункциональных приложений. Вот почему:

  • Быстрая разработка: серверные возможности Django позволяют разработчикам быстро создавать мощные приложения, в то время как Tailwind CSS помогает упростить процесс создания стилей благодаря подходу, ориентированному в первую очередь на полезность.

  • Настраиваемый дизайн: С Tailwind вы не ограничены предопределенными стилями. Вы можете создать уникальный, последовательный дизайн, который легко масштабируется по мере роста вашего проекта.

  • Разделение задач: Система создания шаблонов Django работает рука об руку с Tailwind CSS, обеспечивая четкое разделение между внутренней логикой и интерфейсным стилем.

Как инициализировать проект на Django?

  1. Установить Django: Установить Django с помощью pip:

     pip install django

  2. Создайте проект Django: Используйте команду администратора Django для создания нового проекта:

     django-admin startproject myproject

  3. Перейдите в каталог Вашего проекта:

     cd myproject

  4. Изменять settings.py:

    • В настройках TEMPLATES добавьте каталог templates:

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

    • Добавьте каталог static для ваших статических файлов:

        STATICFILES_DIRS = [BASE_DIR / "static"]

Как интегрировать Tailwind CSS с Django?

  1. Установите Tailwind CSS: Убедитесь, что Node.js установлен, затем запустите:

     npm install -D tailwindcss
 npx tailwindcss init

  2. Настройка Tailwind CSS: В вашем каталоге static/css создайте файл main.css со следующим содержимым:

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

  3. Измените tailwind.config.js: Измените раздел содержимого, включив в него templates/*.html файлы, гарантируя, что Tailwind CSS генерирует необходимые стили.

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

  4. Добавьте сценарий сборки: Обновите свой package.json, чтобы включить сценарий сборки:

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

  5. Скомпилируйте Tailwind CSS:

     npm run watch:css

Давайте создадим приложение-пузырь для чата.

  1. Создайте приложение Django:

     django-admin startapp chat

  2. Настройка видов:

    • В chat/views.py создайте простое представление:

        from django.shortcuts import render
  def chat(request):
      return render(request, "chat.html")

  3. Настройка URL-адресов:

    • В chat/urls.py укажите шаблон URL-адреса для вашего просмотра:

        from django.urls import path
  from . import views
  urlpatterns = [
      path("", views.chat, name="chat"),
  ]

    • В urls.py проекта укажите URL-адреса приложений:

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

  4. Настройка базового HTML-шаблона:

    • Создайте templates/base.html файл, который послужит основой вашего приложения:

        {% 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>

  5. Создайте шаблон чата:

    • В templates/chat.html расширьте базовый шаблон:
    {% 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 %}
  1. Запустите сервер разработки: bash python manage.py runserver

Как использовать Prettier для форматирования класса?

Чтобы ваши классы Tailwind CSS были чистыми и организованными, вы можете интегрировать Prettier в свой рабочий процесс.

  1. Установите Prettier и плагин Tailwind:

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

  2. Настройте красивее: Создайте файл .prettierrc в корневом каталоге вашего проекта:

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

  3. Форматировать при сохранении: Настройте свой редактор кода на автоматическое форматирование файлов с помощью Prettier при сохранении.

Результат:

Репозиторий на GitHub: ts-django-tailwindcss

chat bubble ts

Как создать чат-бар, используя компоненты FlyonUI Tailwind и Django

Здесь мы будем использовать FlyonUI, библиотеку компонентов CSS Tailwind с открытым исходным кодом . Она предлагает широкий спектр настраиваемых, доступных и готовых к использованию компонентов.

Давайте интегрируем Django с компонентами FlyonUI и создадим чат-пузырь.

Шаг 1: Установите flyonui

Установите flyonui через npm.

npm install -D flyonui@latest

Шаг 2: Настройте попутный ветер

Добавьте путь к файлам FlyonUI JavaScript в свой файл tailwind.config.js.

module.exports = {
  content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component

  plugins: [
    require("flyonui"),
    require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
  ]
}

Шаг 3: Скопируйте JavaScript FlyonUI

Скопируйте JavaScript-файлы FlyonUI (node_modules/flyonui/flyonui.js) в папку static/.

Шаг 4: Добавьте Js в свой base.html

После того, как вы скопировали js file в свою статическую папку, включите ее в base.html.

<html lang="en">
 ...
 <body>
  ...
  <script src="{% static 'js/flyonui.js' %}"></script>
 </body>
</html>

Давайте обновим кодовый блок пузыря чата:

{% extends "base.html" %}
{% block content %}
<div>
  <div class="chat chat-receiver">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>"
          alt="avatar"
        />
      </div>
    </div>
    <div class="chat-header text-base-content/90">
      Obi-Wan Kenobi
      <time class="text-base-content/50">12:45</time>
    </div>
    <div class="chat-bubble">I started learning guitar today!</div>
    <div class="chat-footer text-base-content/50">
      <div>Delivered</div>
    </div>
  </div>
  <div class="chat chat-sender">
    <div class="avatar chat-avatar">
      <div class="size-10 rounded-full">
        <img
          src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png>"
          alt="avatar"
        />
      </div>
    </div>
    <div class="chat-header text-base-content/90">
      Anakin
      <time class="text-base-content/50">12:46</time>
    </div>
    <div class="chat-bubble">
      That's awesome! You're going to be great at it!
    </div>
    <div class="chat-footer text-base-content/50">
      Seen
      <span class="icon-[tabler--checks] align-bottom text-success"></span>
    </div>
  </div>
</div>
{% endblock %}

Результат:

chat bubble example

Заключение

Использование Tailwind CSS в Django - отличный способ заставить ваши веб-приложения хорошо выглядеть и работать на разных устройствах, используя при этом множество возможностей Django. Эта настройка не только повышает производительность, но и помогает вам придерживаться надлежащих методов оформления.

Вот репозиторий, где вы можете найти более подробную информацию или посмотреть полный код: ts-django-tailwindcss. Я надеюсь, что это руководство поможет вам с интеграцией Django с Tailwind CSS. Я подготовил эту статью с помощью Прутви Праджапати, front-end разработчика с 2-летним опытом работы.

Счастливого кодирования!

Вернуться на верх