Использование каскадных слоев CSS для управления пользовательскими стилями в проекте Tailwind

Если служебный класс делает только одну вещь, скорее всего, вы не хотите, чтобы он переопределялся какими-либо стилями, пришедшими откуда-то еще. Один из подходов заключается в использовании !important чтобы быть на 100% уверенным, что стиль будет применен, независимо от конфликтов специфики.

Конфигурационный файл Tailwind имеет !important опция, которая автоматически добавит !important каждому классу полезности. Нет ничего плохого в использовании !important таким образом, но в настоящее время есть лучшие способы обработки специфичности. С использованием Каскадные слои CSS мы можем избежать жесткого подхода с использованием !important.

Каскадные слои позволяют группировать стили в «слои». Приоритет слоя всегда важнее специфичности селектора. Специфика имеет значение только внутри каждого слоя. Установление разумного порядка слоев помогает избежать конфликтов стилей и войн специфики. Вот что делает CSS Cascade Layers отличным инструментом для управление пользовательскими стилями вместе со стилями из сторонних фреймворков, как Попутный ветер.

Источник попутного ветра .css файл обычно начинается примерно так:

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

Давайте посмотрим на официальные документы Tailwind о директивах:

Директивы — это настраиваемые правила at для Tailwind, которые вы можете использовать в своем CSS, которые предлагают специальные функции для проектов Tailwind CSS. Использовать @tailwind директива для вставки Tailwind's base, components, utilities и variants стили в свой CSS.

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

Попутный ветер @layer Директивы

Как ни странно, у Tailwind есть свои @layer синтаксис. Эта статья посвящена стандарту CSS, но давайте кратко рассмотрим версию Tailwind (которая компилируется и не попадает в выходной CSS). Попутный ветер @layer Директива — это способ внедрить ваши собственные дополнительные стили в указанную часть выходного файла CSS.

Например, чтобы добавить собственные стили в base стилей, вы должны сделать следующее:

@layer base {
  h1 {
    font-size: 30px;
  }
}

Ассоциация components Слой по умолчанию пуст — это просто место для размещения ваших собственных классов. Если бы вы делали что-то в стиле Tailwind, вы, вероятно, использовали бы @apply (хотя создатель Tailwind недавно посоветовал против этого), но вы также можете писать классы обычным способом:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

Стандарт CSS намного мощнее. Вернемся к этому…

Использование стандарта CSS @layer

Вот как мы можем переписать это, чтобы использовать стандарт CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

В отличие от директивы Tailwind, они не компилируются. Они понятны браузеру. Фактически, DevTools в Edge, Chrome, Safari и Firefox даже покажет вам все определенные вами слои.

Вы можете иметь столько слоев, сколько хотите, и называть их как хотите, но в этом примере все мои пользовательские стили находятся в одном слое (my-custom-styles). Первая строка устанавливает порядок слоев:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Это должно быть предоставлено заранее. Обязательно включите эту строку перед любым другим кодом, использующим @layer. Первым слоем в списке будет наименее мощным, а последним слоем в списке будет самых мощный. Это означает tailwind-base это наименее мощный слой и любой код в нем будет переопределен всеми последующими слоями. Это также означает tailwind-utilities всегда будет превосходить любые другие стили — независимо от исходного порядка или специфики. (Утилиты и варианты может идут отдельными слоями, но сопровождающие Tailwind позаботятся о том, чтобы варианты всегда превосходили утилиты, если вы включаете варианты ниже директивы утилит.)

Все, что не находится в слое, переопределит все, что находится в слое (за исключением стилей, использующих !important). Таким образом, вы также можете выбрать оставить utilities и variants вне любого слоя:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Что это на самом деле купило нас? Есть много случаев, когда продвинутые селекторы CSS очень удобны. Давайте создадим версию :focus-within который реагирует только на фокус клавиатуры, а не на щелчки мыши с помощью :has селектор (который попадает в Chrome 105). Это стилизует родительский элемент, когда любой из его дочерних элементов получает фокус. Представлен Tailwind 3.1 нестандартные варианты - например <div class="[&:has(:focus-visible)]:outline-red-600"> — но иногда проще просто написать CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Скажем, только в одном случае мы хотим переопределить outline-color от blue к чему-то другому. Допустим, элемент, с которым мы работаем, имеет класс Tailwind .outline-red-600 и наши собственные .radio-container:has(:focus-visible) учебный класс:

<div class="outline-red-600 radio-container"> ... </div>

Который outline-color победит?

Как правило, более высокая специфичность .radio-container:has(:focus-visible) будет означать, что класс Tailwind не имеет никакого эффекта, даже если он ниже в исходном порядке. Но, в отличие от Tailwind @layer директива, которая зависит от исходного порядка, стандарта CSS @layer отменяет специфичность.

В результате мы можем использовать сложные селекторы в наших собственных стилях, но по-прежнему переопределять их с помощью служебных классов Tailwind, когда нам это нужно — без необходимости прибегать к неуклюжим !important использование, чтобы получить то, что мы хотим.