Как использовать Tailwind CSS с Django?

На чтение2 мин

Обновлено1 год назад

Просмотров

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

Прежде чем мы углубимся в процесс установки, убедитесь, что у вас есть следующие предварительные условия:

В вашей системе установлен Python (предпочтительно версия 3.6 или выше).
Базовое понимание Django и структуры его проекта.
Знакомство с инструментами интерфейса командной строки (CLI).

Шаг 1. Создайте проект Django

Для начала давайте создадим новый проект Django. Откройте терминал или командную строку и выполните следующую команду:

$ django-admin startproject myproject

Это создаст новый проект Django с именем myproject. Перейдите в каталог проекта:

$ cd myproject

Шаг 2. Установите CSS Tailwind

Далее нам нужно установить Tailwind CSS и его зависимости. В терминале выполните следующие команды:

$ pip install django-webpack-loader
$ npm init -y
$ npm install tailwindcss postcss autoprefixer

Шаг 3. Настройте CSS Tailwind

После установки Tailwind CSS нам нужно настроить его для нашего проекта Django. Создайте новый файл с именем Tailwind.config.js в корневом каталоге вашего проекта и добавьте следующее содержимое:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Шаг 4. Создайте конфигурацию PostCSS

Создайте новый файл с именем postcss.config.js в корневом каталоге проекта и включите в него следующее содержимое:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Шаг 5. Обновите настройки Django

В своем проекте Django откройте файл settings.py и измените настройки INSTALLED_APPS и STATICFILES_DIRS следующим образом:

INSTALLED_APPS = [
    # ...
    'webpack_loader',
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

Шаг 6. Обновите URL-адреса Django

Откройте файл urls.py в своем проекте Django и добавьте следующий код:

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    # ...
    path('', TemplateView.as_view(template_name='index.html')),
]

Шаг 7. Создайте базовый HTML-шаблон

Создайте новый файл с именем base.html в каталоге шаблонов вашего проекта Django. Добавьте следующий контент:

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

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

Шаг 8: Создайте домашнюю страницу

Создайте новый файл с именем index.html в каталоге шаблонов и расширьте шаблон base.html. Обновите его содержимое в соответствии с вашими потребностями.

Шаг 9: Скомпилируйте ресурсы

В своем терминале выполните следующую команду, чтобы скомпилировать ресурсы с использованием Tailwind CSS:

$ npx tailwindcss-cli@latest build -o static/styles.css

Шаг 10. Запустите сервер разработки Django.

Наконец, запустите сервер разработки Django, выполнив следующую команду:

$ python manage.py runserver

Теперь сервер будет обслуживать ваше приложение Django со стилями CSS Tailwind.

Вот и все! Вы успешно интегрировали CSS Tailwind в свой проект Python Django. Теперь вы можете использовать служебные классы и компоненты Tailwind CSS в своих HTML-шаблонах.

#Django #TailwindCSS #CSS #Python