Взлет и падение Bootstrap

Как Tailwind стал ведущим CSS-фреймворком

Недавно мне довелось поработать с Bootstrap 5, и в сравнении с Tailwind это был сущий кошмар

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

Примеры проектов я искал на Frontend Mentors, а код писал с использованием различных технологий. Например, один из первых проектов представлял собой интеграцию компонента карточки товара. Я решил написать решение с помощью чистого CSS, с использованием Tailwind и Bootstrap.



Это оказалось интересно не только аудитории, но и мне самому. Я хотел проследить, как менялись Tailwind и Bootstrap в последние годы. Справедливости ради, я понимал, что работа с Tailwind окажется весьма приятной, но не подозревал, что общение с Bootstrap 5 будет настолько мучительным. Мой опыт оказался настолько ужасен, что я решил написать эту статью.
Здесь вы найдете исторические факты (в основном о Bootstrap), мысли (о моем опыте разработчика) и фрагменты кода. Для начала поговорим об истории.

Время, когда все использовали Bootstrap

Еще несколько лет назад Bootstrap был повсюду. В 2016 году нельзя было встретить сайт, который не работал бы на Bootstrap. CSS Flexbox уже существовал, но CSS Grid еще не был широко известен и мало где поддерживался. Я помню, как в середине 2016 года я беседовал с одним разработчиком о CSS Grid и рассказал ему о возможностях Grid. Его ответ потряс меня до глубины души: сперва он решил, что я говорю об HTML-таблицах, ведь о CSS Grid он и вовсе ничего не слышал. В то время все работали на Bootstrap 3 и активно пользовались jQuery.

Кроме Bootstrap, были и другие CSS-фреймворки. Вторым по известности был Foundations. Кроме как для создания шаблонов электронной почты, я им особо не пользовался. Возможно, он был лучше или хуже Bootstrap, отличался от него или, напротив, копировал. Я и правда знаком с ним слишком мало для того, чтобы делать выводы.

Foundations заявляли (и, судя по их страницам на GitHub, до сих пор заявляют), что они «Самый продвинутый респонсивный фронтенд-фреймворк в мире». Однако при взгляде на официальную документацию и репозиторий проекта на GitHub, складывается впечатление, что он скорее мертв, чем жив. Не хотелось бы тратить слишком много времени на исторические справки, поэтому я пройдусь только по верхам.



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

Для некоторых сайтов это может быть преимуществом, потому что пользователям не придется переучивать паттерны и способы навигации. К примеру, они уже знают, как выглядят ссылка или кнопка submit. Но на каком-то этапе сайт из-за этого теряет свою идентичность. Вторая сильная сторона Bootstrap заключается в том, что в Bootstrap 5 было принято решение избавиться от jQuery. Не уверен, хорошее это было решение или плохое. В настоящее время jQuery пользуется меньшей популярностью, чем другие фронтенд-фреймворки, и все реже используется разработчиками, так что, в некотором смысле, это решение имело смысл.

Однако удаление jQuery увеличило объем работы, с которым пришлось столкнуться разработчикам, к тому же пришлось попрощаться с рядом инструментов совместимости со старыми браузерами. Если вы хотите узнать подробности, то вот отличная статья на эту тему.

Наконец, я просто благодарен Bootstrap за хорошую работу. Команда Bootstrap 4 крайне много сделала для доступности веб-сайтов и приложений. Она внедрила множество концепций, связанных с атрибутами aria, и привела конкретные примеры и образцы кода, которыми можно пользоваться. На мой вкус, Bootstrap 4 был великолепен! К сожалению, Bootstrap 5 таковым больше не является.

Tailwind: Как он переосмыслил способ работы с CSS

Как и многие другие, я открыл для себя термин «Utility-first CSS» благодаря Tailwind. До этого я пытался ориентироваться на BEM. Не знаю, как вы, но я всегда чувствовал себя с BEM неловко. Я понимаю концепцию модификаторов, но иногда испытываю трудности, когда приходится использовать либо блок, либо элемент. Если Вы не знакомы с BEM, я советую ознакомиться с этим ресурсом. Резюмируя всё вышесказанное, BEM можно расценивать как способ структурирования CSS-кода.

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

Вернемся к Tailwind. Почему создание «Utility-first» CSS фреймворка оказалось такой удачной идеей? Если вы уже прочитали статью, которой я поделился в последней ссылке, вы уже должны знать ответ. Вместо того, чтобы полагаться на компоненты которые применяют множество стилей одновременно, как в Bootstrap, вы добавляете классы, которые отвечают только за что-то одно. Другими словами, вы оперируете классами, которые можно комбинировать как угодно для построения любого дизайна: один класс отвечает за padding, другой — за размер шрифта и т.д.
Давайте рассмотрим пример.

Вот как можно написать компонент карточки с помощью Bootstrap:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

И вот результат:


Источник: Официальная документация Bootstrap

Вот как можно написать компонент карточки с помощью Tailwind:

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

И вот результат:


Источник: Официальная документация Tailwind

Эти две карточки выглядят по-разному, но я хочу, чтобы вы посмотрели на код. В Bootstrap компоненты карточек могут отличаться по размерам и цветам, но в итоге они выглядят более или менее одинаково. Помните, что я говорил вам в начале этой статьи? Легко можно определить, что на сайте используется Bootstrap.

Однако с помощью Tailwind можно добавить собственные стили практически ко всем элементам. Почему это так важно, спросите вы? Во-первых, потому что это позволяет оформить сайт так, как вам хочется, это отличная возможность, особенно для дизайнеров! Во-вторых, потому что это помогает вам, как разработчику, максимально приблизиться к макету, не нарушая разделение ответственности между HTML-разметкой и CSS.

С Tailwind больше не нужно полагаться на BEM. Для меня это действительно хорошая новость!

Опыт разработчика и документация

Источник: pixabay.com

Tailwind: легко настроить и использовать

Это был один из моих первых опытов с Tailwind. То есть, я знал этот проект раньше и уже читал документацию, но у меня не было случая использовать его на деле. Для своего проекта я решил не пользоваться CLI или PostCSS.

Вместо этого я решил попробовать использовать Tailwind с CDN. Я понимаю, что это не лучший вариант для «боевого» сайта, однако моим тестовым целям это отвечало на 100%. Даже с CDN я был поражен тем, насколько просто настроить Tailwind, просто добавив пользовательские цвета и шрифты.

По сравнению с Tailwind, API Bootstrap — это полный бардак. И в документации, и в примерах кода нелегко разобраться, особенно если вы еще не знакомы с пятой версией.

Вот как я настраиваю Tailwind в своем проекте:

<script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            viridian: 'hsl(158, 36%, 37%)',
            dawnPink: 'hsl(30, 38%, 92%)',
            white: 'hsl(0, 0%, 100%)',
            ebonyClay: 'hsl(212, 21%, 14%)',
            stormGray: 'hsl(228, 12%, 48%)'
          },
          fontFamily: {
            montserrat: ['Montserrat', 'sans-serif'],
            fraunces: ['Fraunces', 'serif']
          }
        }
      }
    }
  </script>

В приведенном выше примере кода я добавил новые цвета и новые семейства шрифтов внутрь tailwind.config.

А вот как я использую его в своем коде:

<p class="font-montserrat font-medium text-xs tracking-[.5em] uppercase
text-stormGray mb-3">
  Perfume
</p>
<h1 class="font-fraunces text-3xl font-bold text-ebonyClay mb-4">
  Gabrielle Essence Eau de Parfum
</h1>
<p class="font-montserrat font-medium text-sm text-stormGray mb-6">
  A floral, solar and voluptuous interpretation composed by Olivier Polge,
  Perfumer-Creator for the House of CHANEL.
</p>

Посмотрите, как это просто! Мне не нужно писать пользовательский CSS или Sass-код. Достаточно только вызвать нужные классы. Это очень, очень просто и в то же время мощно!

Tailwind: какая замечательная документация!

Это подводит нас ко второму преимуществу Tailwind: его документации. Я разработчик (думаю, и вы тоже). Чаще всего, когда мы торопимся с проектом, у нас нет времени читать всю документацию. Нам нужны простые, но конкретные примеры, которые мы можем использовать и повторить.

Мы хотим быстро понять, подходит нам этот инструмент или нет. В последние годы я заинтересовался Developer Experience, сокращенно DX. Вот определение, которое я нашел в интернете:

Опыт разработчика (Developer Experience) — это каждое взаимодействие разработчика с API или самим инструментом.
Источник: everydeveloper.com/developer-experience

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

Подумайте также и о документации и о том, насколько легко работать с библиотекой или фреймворком.

Например, я считаю, что опыт разработчика в Symfony и Angular великолепен. Они предоставляют туториал, отличную документацию и примеры кода. Но есть и кое-что еще! Начиная пользоваться ими, вы косвенно узнаете и другие концепции. Например, документация Symfony объясняет принципы Entity и Repository Pattern. Angular знакомит вас с Promises и Observables.

А вот документация по React, напротив, не слишком хороша. В течение долгого времени там не объяснялось, как писать эффективные тесты. Даже по Hooks информации код наплакал. Чаще всего, когда я обсуждаю с коллегами React Hooks, они не понимают, как это работает. Короче говоря, DX очень важен. Важнее, чем кажется. Он может сделать проект успешным, а может и завалить. С Tailwind я справился с проектом всего за один день. Документацию легко читать и использовать, как и сам фреймворк. А что насчет Bootstrap 5?

Bootstrap: гремучая смесь компонентов и утилит

С самого начала своего существования Bootstrap был полностью сосредоточен на компонентах. Существуют компоненты для форм, каруселей (даже если карусель вам не нужна), хлебных крошек, модальных окон и т.д. Это и есть (или была?) самая сильная сторона Bootstrap.

Что, если мне нужно создать заголовок? Я загляну на страницу «Типографика» и найду информацию о классах заголовков и их отображении.

Отлично! Но как насчет страницы «Текст» в разделе «Утилиты», в частности, подраздел «Размеры шрифтов»? О, это еще один способ изменить размер шрифта. Но какой из них лучше использовать? Могу ли я комбинировать оба способа? Что фреймворк хочет, чтобы я сделал? Именно такие вопросы я задаю себе, когда пишу код.

Мое впечатление таково, что Bootstrap сейчас находится между двух стульев, и не знает, на какой из них сесть. С одной стороны, они хотят, чтобы вы придерживались Bootstrap и его библиотеки компонентов. Именно сюда команда разработки вложила так много времени и усилий. С другой стороны, появились утилиты и их API. Но опять же, примеров в документации раз, два, и обчелся.

API утилит Bootstrap: мне потребовалось время, чтобы разобраться в нем

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

Я хотел добавить элементу ширину 90%. Я просмотрел документацию и нашел страницу Sizing в разделе Utilities. По умолчанию ширина была 25, 50, 75 и 100%. Сначала я создал пользовательский класс w-90, который обозначал 90%, но что-то здесь явно было не так.

Код, честно говоря, начал припахивать! Я посмотрел на страницу Utility API, быстро прочитал ее (как это делают многие разработчики) и решил, что все понял. Чтобы использовать этот API с npm, нужно было установить в проект Sass и Bootstrap.

Вполне справедливо! Я установил их.

Затем я перешел на страницу Sass в разделе Customize и оказался перед выбором: либо импортировать всё без разбора и не иметь возможности изменять утилиты, либо импортировать нужное вручную.

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 8. Add additional custom code here

После этого я изменил утилиты (я покажу ниже, как это сделать) и скомпилировал Sass в CSS. В первом приближении казалось, что все работает, но я быстро обнаружил, что мои кнопки лишились стилей. Почему, спросите вы? Потому что я забыл импортировать некоторые фрагменты Bootstrap. Посмотрите на пункт 6. Здесь говорится: «Опционально включите любые другие части Boostrap по мере необходимости», но я новичок в Bootstrap 5. Я не знаю, какие части нужны, а какие нет. Помните, что я говорил о DX? По мне, так это очень плохой DX!

Вот что я бы добавил, чтобы заставить его работать:

// Include any default variable overrides here (though functions won't be available)
// Custom variables
$viridian: hsl(158, 36%, 37%);
$dawn-pink: hsl(30, 38%, 92%);
$white: hsl(0, 0%, 100%);
$ebony-clay: hsl(212, 21%, 14%);
$storm-gray: hsl(228, 12%, 48%);

$font-montserrat: 'Montserrat', sans-serif;
$font-fraunces: 'Fraunces', serif;

// Configuration
@import "../node_modules/bootstrap/scss/functions";


// 2. Include any default variable overrides here
$body-bg: $dawn-pink;
$font-weight-normal: 500;


@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here
$custom-colors: (
  "viridian": $viridian,
  "dawn-pink": $dawn-pink,
  "white": $white,
  "ebony-clay": $ebony-clay,
  "storm-gray": $storm-gray
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);


@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";


// Import we don't need
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";

// Helpers
@import "../node_modules/bootstrap/scss/helpers";
$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (90: 90%),
        ),
      ),
    ),
    "max-width": map-merge(
      map-get($utilities, "max-width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "max-width"), "values"),
          (600: 680px),
        ),
      ),
    ),
    "font-family": map-merge(
      map-get($utilities, "font-family"),
      (
        values: map-merge(
          map-get(map-get($utilities, "font-family"), "values"),
          (
            montserrat: $font-montserrat,
            fraunces: $font-fraunces
          ),
        ),
      ),
    ),
    "letter-spacing": (
      property: letter-spacing,
      class: lt,
      responsive: true,
      values: (
        0: 0px,
        5: 5px,
        10: 10px
      )
    )
  )
);

// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";

.max-w {
  max-width: 300px;
}

Как импортировать пользовательский шрифт

C помощью Tailwind

Сначала импортируйте шрифты. Я использую Google Fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap"
rel="stylesheet">

Затем импортируйте Tailwind с CDN и обновите tailwind config. Я добавляю запасные шрифты, а также новые цвета.

<script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            viridian: 'hsl(158, 36%, 37%)',
            dawnPink: 'hsl(30, 38%, 92%)',
            white: 'hsl(0, 0%, 100%)',
            ebonyClay: 'hsl(212, 21%, 14%)',
            stormGray: 'hsl(228, 12%, 48%)'
          },
          fontFamily: {
            montserrat: ['Montserrat', 'sans-serif'],
            fraunces: ['Fraunces', 'serif']
          }
        }
      }
    }
  </script>

И всё, можно ими пользоваться!

<span class="text-white font-montserrat font-bold text-sm">
  Add to Cart
</span>

Все просто, не так ли?

C помощью Bootstrap

Установите Sass с помощью Npm:

{
  "dependencies": {
    "bootstrap": "^5.2.0",
    "sass": "^1.53.0"
  },
  "scripts": {
    "sass": "node_modules/.bin/sass scss/main.scss css/main.css --watch"
  }
}

Добавьте Bootstrap через Sass и импортируйте все части Bootstrap.

Затем можно будет удалить те части, которые вам не нужны.

Между строками 9 и 10 я определил свои переменные Sass. Между строками 102 и 113 я обновляю свои утилиты font-family.

// Include any default variable overrides here (though functions won't be available)
// Custom variables
$viridian: hsl(158, 36%, 37%);
$dawn-pink: hsl(30, 38%, 92%);
$white: hsl(0, 0%, 100%);
$ebony-clay: hsl(212, 21%, 14%);
$storm-gray: hsl(228, 12%, 48%);

$font-montserrat: 'Montserrat', sans-serif;
$font-fraunces: 'Fraunces', serif;

// Configuration
@import "../node_modules/bootstrap/scss/functions";


// 2. Include any default variable overrides here
$body-bg: $dawn-pink;
$font-weight-normal: 500;


@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here
$custom-colors: (
  "viridian": $viridian,
  "dawn-pink": $dawn-pink,
  "white": $white,
  "ebony-clay": $ebony-clay,
  "storm-gray": $storm-gray
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);


@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";


// Import we don't need
import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";

// Helpers
@import "../node_modules/bootstrap/scss/helpers";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (90: 90%),
        ),
      ),
    ),
    "max-width": map-merge(
      map-get($utilities, "max-width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "max-width"), "values"),
          (600: 680px),
        ),
      ),
    ),
    "font-family": map-merge(
      map-get($utilities, "font-family"),
      (
        values: map-merge(
          map-get(map-get($utilities, "font-family"), "values"),
          (
            montserrat: $font-montserrat,
            fraunces: $font-fraunces
          ),
        ),
      ),
    ),
    "letter-spacing": (
      property: letter-spacing,
      class: lt,
      responsive: true,
      values: (
        0: 0px,
        5: 5px,
        10: 10px
      )
    )
  )
);

// Utilities
@import "../node_modules/bootstrap/scss/utilities/api";

.max-w {
  max-width: 300px;
}

Затем я использую их внутри HTML файла:

<p class="text-uppercase text-storm-gray font-montserrat fw-normal lt-5">Perfume</p>

Как добавить межбуквенные интервалы

C помощью Tailwind

Импортируйте Tailwind с помощью этого кода:

<script src="https://cdn.tailwindcss.com"></script>

Используйте пользовательский класс tailwind. Посмотрите на tracking-[.5em].

<p class="font-montserrat font-medium text-xs tracking-[.5em] uppercase text-stormGray mb-3">Perfume</p>

Да, вот так просто!

C помощью Bootstrap

Все так же, как и выше. Я устанавливаю Bootstrap и Sass через Npm.

Затем я обновляю свои утилиты, добавляя новую. Посмотрите на строку 34. Я создаю новую утилиту; она использует класс lt и имеет три значения.

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (90: 90%),
        ),
      ),
    ),
    "max-width": map-merge(
      map-get($utilities, "max-width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "max-width"), "values"),
          (600: 680px),
        ),
      ),
    ),
    "font-family": map-merge(
      map-get($utilities, "font-family"),
      (
        values: map-merge(
          map-get(map-get($utilities, "font-family"), "values"),
          (
            montserrat: $font-montserrat,
            fraunces: $font-fraunces
          ),
        ),
      ),
    ),
    "letter-spacing": (
      property: letter-spacing,
      class: lt,
      responsive: true,
      values: (
        0: 0px,
        5: 5px,
        10: 10px
      )
    )
  )
);

Наконец, я использую ее:

<p class="text-uppercase text-storm-gray font-montserrat fw-normal lt-5">Perfume</p>

Фух, это была длинная статья! Длиннее, чем я ожидал, когда начинал ее писать. Прежде чем попрощаться, я хочу сказать несколько слов о Bootstrap. Bootstrap 5 не слишком хорош. Bootstrap 3 и 4 были гораздо лучше. Особенно в плане документации и DX.

Мое впечатление таково, что Bootstrap идет на спад. Он еще не умирает, но кажется, что основная команда потеряла видение проекта и не знает, куда двигаться дальше. Может, я ошибаюсь, но Bootstrap был создан до появления React и полноценных SPA.

Он хорошо работал и продолжает хорошо работать с fullstack-фреймворками, ну, кроме React. По крайней мере, мне так кажется. Возможно, через несколько лет мы вернемся к Bootstrap, но на сегодняшний день я не готов его кому-то советовать…

Вот полный код задачи с Bootstrap и Tailwind.