81 lines
7.1 KiB
CSS
81 lines
7.1 KiB
CSS
/*
|
||
tailwind-custom.css — кастомные Tailwind-директивы проекта lpon.ru
|
||
(c) 2026, Sergei Erjemin, https://lpon.ru
|
||
{% comment %}
|
||
ВНИМАНИЕ: этот файл не просто CSS! Это Django-шаблон, который подключается через
|
||
include-тег в инлайновый блок <style type="text/tailwindcss"> шаблона _base.html.
|
||
|
||
ВАЖНО: этот файл содержит ТОЛЬКО директивы @theme/@layer, которые обязаны
|
||
пройти через компилятор Tailwind, поэтому подключать его напрямую через
|
||
<link rel="stylesheet"> НЕЛЬЗЯ — обычный браузерный CSS-парсер не понимает
|
||
@theme/@apply и просто отбросит эти правила (проверено на практике: именно
|
||
так "молчал" прежний lpon.css).
|
||
|
||
ОЧЕНЬ ВАЖНО: Так как этот CSS-файл сам является Django-шаблоном (подключается
|
||
инлайн через include-тег движка шаблонов), то внутри него НЕЛЬЗЯ писать буквенные
|
||
примеры Django-тегов вида "открыть-процент include ... процент-закрыть" —
|
||
движок шаблонов исполнит их по-настоящему, даже внутри CSS-комментария.
|
||
Это может привести к бесконечным рекурсиям (файл случайно подключал
|
||
сам себя) и другим непредсказуемым последствиям.
|
||
Если использовать комментарии для шаблонов Django, как здесь, то это безопасно.
|
||
|
||
Файл используется в ДВУХ местах одновременно:
|
||
1. В dev — подключается инклюд-тегом движка шаблонов Django ВНУТРИ
|
||
инлайнового блока <style type="text/tailwindcss"> в _base.html.
|
||
Именно этот блок сканирует и компилирует CDN-скрипт
|
||
@tailwindcss/browser прямо в браузере (он видит только финальный DOM,
|
||
а не внешние .css-файлы, подключённые через <link>).
|
||
2. В prod — подключается через нативный CSS @import из
|
||
frontend-assembly/tailwind/input.css в сборщике scripts/build-tailwind.sh.
|
||
Результат Tailwind CLI собирает в public/static/css/tailwind.min.css
|
||
(см. frontend-assembly/tailwind/package.json).
|
||
|
||
Поэтому здесь НЕТ строки `@import "tailwindcss";` — её добавляет каждый
|
||
"потребитель" данного файла САМ, непосредственно перед подключением этого
|
||
файла: инлайновый блок в _base.html (в dev) и input.css (в prod). Без
|
||
этого импорта директива @apply внутри @layer base ниже не сможет найти
|
||
используемые в ней стандартные классы (border-slate-500 и т.п.) и упадёт
|
||
с ошибкой "Cannot apply unknown utility class" — при этом в dev это ломает
|
||
ВООБЩЕ ВСЮ генерацию Tailwind CSS на странице (проверено на практике).
|
||
{% endcomment %} */
|
||
@theme { /* -- Кастомные переменные цветов -- {% comment %}
|
||
@theme задаёт кастомные токены цвета, которые можно использовать
|
||
в Tailwind-классах через синтаксис, например, text-(--color-link)
|
||
Это позволяет менять стили глобально, не бегая по шаблонам и не меняя конкретные
|
||
классы, а просто перекрашивая токены цвета в одном месте. {% endcomment %} */
|
||
--color-link: var(--color-slate-500);
|
||
--color-link-hover: var(--color-indigo-800);
|
||
}
|
||
|
||
@layer base { /* -- СЛОЙ BASE для Tailwind v4.0+ — см. https://tailwindcss.com/docs/layer-directive --{% comment %}
|
||
Типовой стиль ссылки "по умолчанию" для всего проекта.
|
||
|
||
Поэтому обычную текстовую ссылку теперь можно писать в шаблоне вообще без
|
||
class="..." (просто тег a с href и текстом внутри, без единого класса) —
|
||
и она сразу получит фирменный вид сайта (пунктирное подчёркивание,
|
||
типовой цвет и ховер). Именно так сделано в block/breadcrumbs.html.
|
||
|
||
ВАЖНЫЙ НЮАНС для ссылок, которые НЕ должны выглядеть как "типовая
|
||
текстовая ссылка" (например, пункты меню-кнопок в block/header.html —
|
||
там ссылка визуально оформлена как кнопка, а не как подчёркнутый текст):
|
||
Tailwind v4 использует настоящие CSS cascade layers (@layer base,
|
||
components, utilities...), и по их правилам слой `utilities` ВСЕГДА
|
||
побеждает слой `base` независимо от специфичности селектора — НО только
|
||
для тех CSS-свойств, которые реально заданы в utilities-классе на этом
|
||
элементе. Если у пункта меню нет своего класса для color/border (как
|
||
сейчас в header.html — там заданы только фон и отступы через
|
||
hover:bg-gray-200, px-4 и т.п.), то свойства color/border-bottom он
|
||
"унаследует" именно отсюда, а не из своего блочного оформления —
|
||
родительский text-slate-900 на <menu> тут не поможет, т.к. у самого
|
||
<a> появится СВОЙ явный color.
|
||
Поэтому такие ссылки-кнопки должны явно "отключать" типовой стиль:
|
||
добавить border-0 (убирает пунктир) и свой text-slate-900 dark:text-
|
||
slate-100 (задаёт свой цвет вместо цвета типовой ссылки) — это и сделано
|
||
в block/header.html.{% endcomment %} */
|
||
a {
|
||
@apply border-b border-dotted border-slate-500 dark:border-slate-300
|
||
text-(--color-link) dark:text-slate-300
|
||
hover:text-(--color-link-hover) dark:hover:text-indigo-200
|
||
hover:border-solid transition-colors;
|
||
}
|
||
} |