Для систем дизайна последовательность и понимание имеют решающее значение. Хорошая система проектирования обеспечивает согласованность реализации посредством конфигурации кода, который ее реализует. Должно быть:

• легко понять, не упуская нюансов, необходимых для хорошего дизайна;
• масштабируемость и удобство обслуживания без ущерба для согласованности.

Используя свой набор React с Tailwind по умолчанию, я покажу вам, как установка собственных значений по умолчанию для типографики, цвета и интервалов — это не просто отправная точка для дифференциации внешнего вида вашего приложения. Что еще более важно, это радикально сокращает объем кода, который нам приходится писать и поддерживать, что снижает умственную нагрузку при реализации стилей систематическим, последовательным и безошибочным способом.

Я начну с серьезной критики, которую вижу постоянно, а затем разложу ряд шагов по настройке, которые использую для ее решения.

Простота использования не означает простоту знаний.

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

Инструменты по умолчанию и инструменты без настройки, такие как Tailwind, – это уровень темпа развития инфраструктуры, который оставляет больше времени для построения. Но если вы масштабируете приложение, которое использует систему дизайна, чтобы выделиться, вы не можете полагаться исключительно на готовые конфигурации «бесплатно, как на обед».

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

Выше приведен яркий пример. Оно почти неразборчиво, и для его понимания требуется немало времени, не говоря уже о манипулировании им. Попытки сделать это с высокой вероятностью приведут к дублированию и ошибкам, что приведет к нарушению единообразия дизайна во всем приложении.

Все классы дизайна легко объединить в одно имя класса. Но в этом нет легкости познания.

Настройте свою систему для удобства изучения

Простота использования требует компромиссов. Использовать чужой стандарт — значит полагаться на его ноу-хау. Это может быть полезно, но может оказаться и ловушкой. Давайте сделаем шаг назад и подумаем, из чего состоят основы дизайн-системы:

• типографика
• цвет
• пробел
• отзывчивость (включая цветовой режим)

В контексте React с Tailwind эти и многие другие элементы системы дизайна задаются в конфигурации Tailwind, которую мы можем настроить.

{/* красивее – игнорировать */}

const config = {
  theme: {
    fontSize: { /* ... */ },
    colors: { /* ... */ },
    spacing: { /* ... */ },
  },
};

Типографские настройки по умолчанию

Вы когда-нибудь пытались запомнить правильный межбуквенный интервал для небольшого текста? Что, если бы вы могли установить его один раз и забыть об этом?

Мы можем установить интерлиньяж (высоту строки) и трекинг (межбуквенный интервал) в качестве параметров для каждого кортежа размера шрифта непосредственно в Tailwind.config. Это означает, что нам не нужно устанавливать интерлиньяж или отслеживание, когда мы используем класс размера шрифта. Нет необходимости запоминать (или искать), каков межбуквенный интервал в мелком тексте.

fontSize: {
  small: [
    "13px",
    { lineHeight: 1.5, letterSpacing: "0.015em" },
  ],
  base: [
    "16px",
    { lineHeight: 1.5, letterSpacing: 0 },
  ],
}

Использование text-small теперь устанавливает размер шрифта, высоту строки и межбуквенный интервал. Объединение основного типографского кортежа в один класс централизует реализацию этих значений в конфигурации, а не в базе кода. Огромная победа в плане ремонтопригодности.

/* 13px/1.5 with 0.015em letter-spacing */

Цвет по умолчанию

Мы можем использовать переменные CSS для установки адаптивных цветов в областях :root и html.dark. Это означает, что мы пишем и управляем одним классом, например bg-canvas, вместо двух, например bg-gray-100 dark:bg-gray-800.

@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/gray-dark.css";

:root {
  --color-gray-base: var(--gray-1);
  --color-gray-bg: var(--gray-3);
  --color-gray-line: var(--gray-4);
  --color-gray-border: var(--gray-5);
  --color-gray-solid: var(--gray-10);
  --color-gray-fill: var(--gray-12);
}

Поскольку я здесь использую цвета Radix, мне не нужно устанавливать область .dark, поскольку это уже сделано для меня. Если вам не нравятся цвета Radix, вы можете настроить их, использовать другую библиотеку или написать свою собственную.

Затем установите переменные CSS в конфигурации Tailwind.

colors: {
  canvas: "var(--color-gray-base)",
  background: "var(--color-gray-bg)",
  line: "var(--color-gray-line)",
  border: "var(--color-gray-border)",
  solid: "var(--color-gray-solid)",
  fill: "var(--color-gray-fill-contrast)",
}

Использование bg-canvas теперь устанавливает соответствующий цвет в светлом или темном режиме. Удаление этого дублирования в базе кода централизует управление цветом в нашей конфигурации вместо того, чтобы распространять его на реализацию классов в компонентах. Огромная победа в плане познавательности и удобства сопровождения.

/* sets --gray-1 as #fcfcfc on :root or #111111 on html.dark */

Семантическое именование

Я сторонник семантических названий цветов и размеров шрифтов, потому что семантическое именование — это принудительная функция, которая связывает смысл использования. Это избавит от догадок о реализации и уменьшит количество ошибок.

Я видел бесчисленное количество проектов, в которых в качестве фона использовались разные оттенки серого-50, серого-100 или серого-200. Эту проблему легко решить, определив цвет, называемый фоном.

Точно так же названия темных и светлых цветов текста легче запомнить, если они называются заливкой и сплошным цветом. Сложнее и больше ошибок, когда они называются «серый-900» и «серый-600», потому что тогда вам придется конкретно помнить, что это не были «серый-950» и «серый-500» или «серый-800» и «серый-700».

Но называть вещи — и соглашаться на них — сложно. В духе нулевой настройки я предлагаю использовать парадигму фона, границ, сплошных заливок и заливок Radix Color. Или эта семантика палитры.

И как только вы установите это в Tailwind.config, Typescript оживит вашу память с помощью автозаполнения.

Избегайте конфликтов пространств имен

Если вы расширяете тему Tailwind и не пишете свою собственную, не используйте уже использованный ключ масштабирования. Вы можете случайно перезаписать класс, который вам нужно использовать.

В предыдущем примере конфигурации цвета вы заметили, что я установил для переменной --color-gray-base значение Canvas, а не Base. Если бы я использовал базу, то использование этой цветовой шкалы в качестве цвета текста (текстовая база) конфликтовало бы с базовым значением размера шрифта по умолчанию, которое также является текстовой базой.

Это не недостаток настройки конфигурации Tailwind, это наследие именования тем: для установки размера шрифта или классов цвета в Tailwind используется text-*.¹

Интервалы по умолчанию

Мы также можем использовать переменные CSS для установки интервалов.

:root {
  --height-nav: 80px;
  --height-tab: 54px;
  --space-inset: 20px;
  --container-text-px: 660px;
  --container-hero-px: 1000px;
}

spacing: {
  em: "1em", /* relate icon size to parent font-size */
  nav: "var(--height-nav)",
  inset: "var(--space-inset)",
  text: "var(--container-text)",
  hero: "var(--container-hero)",
}

Можно сказать, что это чрезмерная инженерия. За исключением того, что когда приходит время рассчитывать сложные интерактивные макеты, такие как прикрепленные заголовки, поля прокрутки и т. д., эта предварительная работа по настройке делает все простым и безошибочным, вплоть до пикселя.

  

    /* ... */
  

Еще раз обратите внимание: использование семантического именования облегчает запоминание и использование.

Дополнение вашей конфигурации Tailwind

Теперь мы настроили маркеры типографики, цвета и интервалов таким образом, чтобы их было легко понять и поддерживать в одном централизованном месте. И нам не нужно писать столько классов для реализации системы. Победа. И есть дальнейшие шаги, которые мы можем предпринять, чтобы уменьшить накладные расходы на реализацию.

Clamp() ваши классы

Что, если я скажу вам, что есть способ полностью избежать написания повсюду text-lg lg:text-xl xl:text-2xl p-2 md:p-4 lg:p-8?

Мы можем избежать установки адаптивных классов размера шрифта, используя зажим в качестве значения размера шрифта в Tailwind.config. Вот простая функция фиксации, которую я использую.

fontSize: {
  title: [
    /* clamp(17px, 14.1429px   0.5714vw, 21px) */
    generateClampSize(500, 1200, 17, 21),
    { lineHeight: 1.5, letterSpacing: "-0.015em" },
  ];
}

Поэтому вместо того, чтобы писать text-lg lg:text-xl xl:text-2xl, мы можем просто написать text-title. Еще раз, повышая отзывчивость размера шрифта в значение ограничения, мы снова избегаем ловушки «реализации классов», экономя умственные усилия, ошибки и время отладки.

Имейте в виду, что это означает, что мы перешли от text-lg lg:text-xl xl:text-2xl Leading-none Tracking-Wide к text-title путем правильной настройки Tailwind. Победа!

/* 17px at 500px, 21px at 1200, fluidly calculated inbetween */
/* …with default line-height and letter-spacing also specified */

  Heading copy

Мы также можем сделать это для пробелов. При расширении темы я добавляю к этим клавишам префикс d, обозначающий «динамический», чтобы отличать их от шкалы интервалов по умолчанию.

spacing: {
  /* lower value is 2/3 of upper value */
  d4: generateClampSize(500, 1200, 10.5, 16),
  d8: generateClampSize(500, 1200, 21, 32),
  d16: generateClampSize(500, 1200, 43, 64),
  d24: generateClampSize(500, 1200, 64, 96),
  d64: generateClampSize(500, 1200, 171, 256),
}

Это позволяет нам писать py-d24 вместо py-16 md:py-20 lg:py-24. Это облегчает бремя хранения в памяти ряда версий веб-сайта для каждого медиа-запроса. Вместо этого это побуждает нас представлять гибко реагирующие макеты, в которых измерения не так важны, как последовательные отношения.

  

    /* ... */
  
  

    /* ... */
  

Краткое содержание

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

• Используйте Tailwind.config в полной мере. Централизуйте и группируйте свои дизайнерские токены и избегайте ловушки «внедрять классы повсюду».
• Используйте зажим() для плавной типографики и интервалов.
• Установите цветовые переменные в :root и .dark для упрощения темного режима.
• Называйте цвета и интервалы семантически: фон в любой день превосходит серый-100.
• Свяжите значки с размером текста с помощью size-em.

Да, требуется предоплата за время. Но это окупается сторицей: меньше кода, меньше ошибок, большая согласованность дизайна и команда, которая действительно понимает систему.

Далее: мы рассмотрим, как использовать Class Variance Authority для создания надежного API стилизации с семантическими реквизитами, взятыми из Tailwind. Следите за обновлениями.

1. Именно поэтому мне не нравится использовать Tailwind-merge для удаления повторяющихся классов Tailwind в JSX. Чаще всего я обнаруживаю, что удаляется цвет текста в пользу text-fontSize, когда оба необходимы. Я удивлен, что все больше разработчиков не поднимают этот вопрос. ↩