Налаштування Tailwind CSS для вашого проекту Django може бути складним завданням, але результат того вартий, оскільки це усуває необхідність написання CSS класів вручну.
Давайте розпочнемо і зробимо наш фронтенд вражаючим.
Крок 1.
Насамперед, вам потрібно встановити Python-пакет для Tailwind CSS, для цього просто перейдіть у вашу кореневу папку, що знаходиться на тому ж рівні, що й файл .venv, і введіть наступну команду. (Не забудьте активувати ваше віртуальне середовище).
pip install django-tailwind
Тепер налаштуйте Tailwind, відкривши додаток main, який має таку ж назву, як і ваш проект. Перейдіть до файлу settings.py і в секції INSTALLED_APPS додайте tailwind.
python manage.py tailwind init
Це створить новий додаток у вашій кореневій директорії з назвою theme.
Крок 2.
Тепер інсталюйте додаток теми, відкривши додаток main, який має таку ж назву, як і ваш проект. Перейдіть до файлу settings.py і в секції INSTALLED_APPS додайте theme.
Тепер додайте ці два параметри в кінці файлу.
TAILWIND_APP_NAME = 'theme'
INTERNAL_IPS = ['127.0.0.1']
Також потрібно вказати шлях до виконуваного файлу node, оскільки Tailwind працює з npm на серверній частині.
NPM_BIN_PATH = "C:\\Program Files\\nodejs\\npm.cmd"
Тепер запустіть команду, щоб переконатися, що Tailwind налаштовано для проекту.
python manage.py tailwind install
Крок 3.
Django-Tailwind поставляється з власним шаблоном, який можна використовувати так само, як і будь-який інший Django шаблон. Щоб почати використовувати його в будь-якому з ваших .html файлів, відкрийте ваш html файл у папці templates і просто додайте {% load static tailwind_tags% } та {% tailwind_css %} всередині тега <head> вашої HTML сторінки. Це має виглядати приблизно так:
{% load static tailwind_tags %}
...
...
{% tailwind_css %}
...
Якщо у вас є файл layout.html, просто повторіть ці кроки для підтримки узгодженості.
Крок 5.
Почніть використовувати Tailwind CSS, додаючи class= до ваших HTML тегів.
Chai aur code | Homepage
Ви не побачите жодних змін, оскільки потрібно запустити Tailwind, щоб постійно налаштовувати CSS файли під час роботи. Просто відкрийте нове вікно в терміналі та введіть команду.
python manage.py tailwind start
Примітки: Якщо ви стикнулися з проблемою, коли python manage.py <> недійсне, просто cd і тоді запустіть команду.
Дякую за те, що прочитали блог до цього моменту.
Сподіваюся, цей блог був корисним. Цей блог більше є записом для мене, щоб пам'ятати налаштування Tailwind на якийсь пізніший час.
Перегляньте повністю налаштований проект за посиланням: Django-learning/blog на main · Adityasinghvats/Django-learning
Перекладено з: SetUp Tailwind CSS in your Django project and avoid common pitfalls.