Tailwind прямо в браузере

Чтобы попробовать Tailwind, не нужно ничего устанавливать: достаточно подключить его браузерную сборку одним тегом <script>. Скрипт находит классы на странице и сразу создаёт для них CSS.

Подключение

Создайте файл index.html, вставьте в <head> строку со скриптом и используйте классы в разметке:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h1 class="text-3xl font-bold text-indigo-600">Магазин</h1>
<p class="text-gray-600">Наушники, колонки и зарядки.</p>

Откройте файл в браузере — заголовок станет крупным, жирным и синим. Скрипт следит за страницей: если JavaScript добавит новый элемент с классами, стили для него появятся автоматически.

Во всех примерах курса первая строка — этот скрипт. Благодаря ему код под примером превращается в работающую страницу, и вы можете менять классы и сразу видеть результат.

Только для обучения

Браузерная сборка удобна для экспериментов и быстрых прототипов, но не для сайтов:

скрипт весит сотни килобайт и создаёт CSS у каждого посетителя заново;
пока он не загрузился, страница видна без стилей;
нельзя подключать плагины из npm.

В настоящих проектах CSS собирают заранее — через Vite или утилиту командной строки. Это следующие два урока, и классы там те же самые.

Свои настройки

CSS для Tailwind в браузере пишут в теге <style type="text/tailwindcss">. Внутри работают особые директивы, например @theme — она добавляет свои цвета:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<style type="text/tailwindcss">
  @theme {
    --color-brand: #e11d48;
  }
</style>
 
<p class="text-brand font-bold">Скидка 20%</p>

Появился класс text-brand, и текст стал малиновым. Подробно @theme разобран в главе о настройке.

Preflight

Вместе с утилитами Tailwind подключает Preflight — базовый сброс стилей браузера. Он убирает отступы у заголовков и абзацев, маркеры у списков, делает картинки блочными и выравнивает размеры шрифтов:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h1>Заголовок</h1>
<ul>
  <li>Наушники</li>
  <li>Колонка</li>
</ul>

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

Частая ошибка

Ждать, что заголовок <h2> сам станет крупным, и удивляться «сломанной» вёрстке. После Preflight размер, жирность и отступы задают классами:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h2 class="mb-2 text-2xl font-semibold">Новинки</h2>
<ul class="list-disc pl-5">
  <li>Наушники</li>
  <li>Колонка</li>
</ul>

Теперь заголовок крупный, а список снова с маркерами — их вернул класс list-disc.

Спасибо, что читаете!