Використання каскадних шарів CSS для керування власними стилями в проекті Tailwind

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

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

Каскадні шари дозволяють групувати стилі в «шари». Пріоритет шару завжди перевищує специфіку селектора. Конкретність має значення лише всередині кожного шару. Встановлення розумного порядку шарів допомагає уникнути конфліктів стилів і війн за специфіку. Ось що робить каскадні шари CSS чудовим інструментом керування користувацькими стилями разом зі стилями сторонніх фреймворків, як Tailwind.

Джерело попутного вітру .css файл зазвичай починається приблизно так:

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

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

Директиви — це спеціальні правила Tailwind, які можна використовувати у своєму CSS і пропонують спеціальні функції для проектів Tailwind CSS. Використовувати @tailwind директива для вставки Tailwind 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 використання, щоб отримати те, що ми хочемо.