diff --git a/lpon_site/templates/_base.html b/lpon_site/templates/_base.html index 89f88af..4ba7be9 100644 --- a/lpon_site/templates/_base.html +++ b/lpon_site/templates/_base.html @@ -27,22 +27,44 @@ {# Шутка #} - {% comment %} - !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - ВАЖНО! В prod будет использоваться tailwind.min.css. Его собирет webpack специально под проект. - Для этого у него в input.css прописаны пути к шаблонам, на которые ему надо посмостеть, и он соберет только - используемые классы и сгенерирует уникальный tailwind.min.css проекта. - {# <-- ДОБАВИТЬ В ПРОДАКШЕНЕ #} + + {% if IS_DEBUG %}{% comment %} + Переключение dev/prod стилей Tailwind CSS происходит АВТОМАТИЧЕСКИ через + переменную IS_DEBUG (см. контексный-процессор frontend/context_processors.py), - В dev используем tailwindcss из CDN. В нем есть все, но он неимоверно грузит браузер.{% endcomment %} - {# <-- УБРАТЬ В ПРОДАКШЕНЕ #} + DEV: tailwindcss из CDN, компилируется прямо в браузере. Удобно для + разработки (не нужна сборка), но грузит браузер и prod не используется. + {% endcomment %}{% comment %} + + Кастомные @theme/@layer директивы проекта (токены цвета, типовой стиль + ссылок) лежат в css/tailwind-custom.css. @tailwindcss/browser сканирует + и компилирует ТОЛЬКО то, что видит в финальном DOM — то есть только + содержимое тегов style с type text/tailwindcss, а не внешние .css, + подключённые через link. Поэтому файл вставляется сюда через include, + а не подключается отдельным link. + + Строка "@import tailwindcss" ниже ОБЯЗАТЕЛЬНА (проверено на практике): + без неё @apply в css/tailwind-custom.css не может найти стандартные + классы Tailwind (border-slate-500 и т.п.), браузерный компилятор + падает с ошибкой уже на этапе разбора — и из-за этого перестаёт + генерироваться ВООБЩЕ ВСЯ Tailwind-разметка на странице (не только + кастомные стили), верстка превращается в неоформленный HTML.{% endcomment %} + {% else %}{% comment %} + PROD: заранее собранный Tailwind CLI файл (см. frontend-assembly/tailwind/input.css + и package.json). CLI сканирует шаблоны проекта и генерирует только реально + используемые классы, включая кастомные @theme/@layer директивы из того же + самого файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %} + {% endif %} {% block EXTRAHEAD %}{% endblock EXTRAHEAD %} diff --git a/lpon_site/templates/css/tailwind-custom.css b/lpon_site/templates/css/tailwind-custom.css new file mode 100644 index 0000000..4e2ee6a --- /dev/null +++ b/lpon_site/templates/css/tailwind-custom.css @@ -0,0 +1,81 @@ +/* + tailwind-custom.css — кастомные Tailwind-директивы проекта lpon.ru + (c) 2026, Sergei Erjemin, https://lpon.ru +{% comment %} +ВНИМАНИЕ: этот файл не просто CSS! Это Django-шаблон, который подключается через + include-тег в инлайновый блок