Поздравляем!

Поздравляем, вы прошли курс Tailwind! Вы оформили с его помощью целый сайт: для телефонов и компьютеров, в светлой и тёмной теме.

Вот чему вы научились на курсе:

• Tailwind — это CSS-фреймворк из маленьких утилитных классов. Вместо того чтобы писать правила, вы задаёте элементам классы, а Tailwind создаёт CSS ровно для тех классов, которые найдёт в ваших файлах. @import "tailwindcss"; включает его, а его базовые стили, Preflight, убирают собственные стили браузера.
• Цвета из палитры (bg-orange-500, text-stone-800), в том числе полупрозрачные (bg-black/50), и текст: размер, жирность, высота строки, выравнивание, расстояние между буквами и семейство шрифтов.
• Шкала отступов, где один шаг равен 4 px: внутренние и внешние отступы, ширина и высота, максимальная ширина и значения в квадратных скобках, когда нужно значение вне шкалы.
• Рамки, скруглённые углы, тени, прозрачность и картинки, обрезанные с помощью object-cover.
• Вёрстка с помощью flexbox и grid (flex, justify-between, items-center, gap-6, grid-cols-3) и позиционирование (relative, absolute, sticky top-0).
• Варианты для состояний, такие как hover:, focus:, active:, disabled: и group-hover:, и плавные переходы.
• Адаптивный дизайн: сначала для телефонов (mobile first) и брейкпоинты sm:, md:, lg: и xl:.
• Тёмная тема с dark:, которая включается классом dark на элементе html.
• Настройка Tailwind: собственные цвета и шрифты в @theme и собственные классы с помощью @apply и @utility.

Tailwind на вашем компьютере. Браузеры не понимают @import "tailwindcss";. На нашем сайте специальная программа превращает ваш style.css в обычный CSS каждый раз, когда вы нажимаете «Запустить». Если просто открыть два ваших файла на своём компьютере, у страницы не будет стилей. Это можно исправить двумя способами.

Для быстрых экспериментов — Play CDN. В head замените ссылку на style.css этим скриптом, а всё содержимое style.css поместите в элемент style с type="text/tailwindcss" (здесь оно сокращено):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
	@import "tailwindcss";
	@custom-variant dark (&:where(.dark, .dark *));

	@theme {
		--color-brand-500: #f97316;
	}
</style>

Этот скрипт — сам Tailwind, работающий в браузере: каждый раз, когда страница открывается, он находит на ней классы и создаёт их CSS. Это удобно, чтобы пробовать разное, но в документации Tailwind сказано, что Play CDN предназначен только для разработки, а не для настоящего сайта: каждому посетителю пришлось бы скачивать весь Tailwind и ждать, пока создаётся CSS.

Для настоящего сайта — инструмент сборки. Программа на вашем компьютере заранее создаёт готовый CSS, как это делает наш сайт, а посетители получают обычный файл CSS. Для этого понадобится Node.js, вместе с которым устанавливается npm, программа для установки пакетов (готовых программ и библиотек), и терминал (командная строка). Для такой страницы, как ваша, проще всего Tailwind CLI (программа для командной строки). Откройте терминал в папке со страницей и выполните:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i style.css -o output.css --watch

Первая команда устанавливает Tailwind в папку. Вторая читает style.css (-i, от input — входной файл), ищет классы в файлах папки и записывает готовый CSS в output.css (-o, от output — выходной файл). С --watch она продолжает работать и создаёт CSS заново при каждом сохранении файла. В index.html подключите output.css вместо style.css и открывайте страницу в браузере как обычно.

В более крупных проектах, особенно с JavaScript, часто используют Vite — инструмент, который подготавливает скрипты, стили и картинки целого сайта. В Vite Tailwind — это плагин. Новый проект создаётся так (Vite задаст несколько вопросов: для обычных HTML, CSS и JavaScript выберите фреймворк Vanilla и вариант JavaScript, а когда он предложит установить и запустить проект сразу, ответьте No, чтобы сначала добавить Tailwind):

npm create vite@latest my-shelter
cd my-shelter
npm install tailwindcss @tailwindcss/vite

Затем добавьте плагин в файл vite.config.js (если его нет в папке проекта, создайте его):

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	plugins: [tailwindcss()],
});

В начале CSS-файла проекта (в шаблоне Vanilla это src/style.css) напишите @import "tailwindcss"; и запустите проект командой npm run dev. Она покажет адрес вашей страницы, например http://localhost:5173/. Документация Tailwind (tailwindcss.com/docs) пошагово описывает оба способа в разделе Installation, а также то, как использовать Tailwind с фреймворками.

Помощники. Если вы пишете код в Visual Studio Code, установите расширение Tailwind CSS IntelliSense: оно подсказывает названия классов по мере набора, а если навести мышь на класс, показывает CSS, который этот класс создаёт. А prettier-plugin-tailwindcss — это плагин для Prettier, программы, которая наводит порядок в коде: он сортирует классы в каждом атрибуте class в одном и том же порядке, чтобы их было легче читать.

Сохраните свою страницу. Как в конце курса CSS, создайте на компьютере папку и сохраните код из index.html в файл index.html, а код из style.css — в файл style.css. Затем одним из двух способов выше посмотрите страницу со стилями. Осторожно с картинками: адрес вроде /learn/tailwind/cat-orange.svg работает только на нашем сайте. Используйте полный адрес, https://www.startcoder.com/learn/tailwind/cat-orange.svg, или сохраните картинки в ту же папку и пишите только имена их файлов.

Что дальше? Когда вам понадобится класс, которого вы ещё не знаете, найдите его в документации Tailwind: её поиск находит классы и по знакомому вам свойству CSS, например justify-content. А следующий шаг на пути к созданию сайтов — JavaScript. HTML даёт странице содержимое, CSS и Tailwind — внешний вид, а JavaScript её оживляет: он умеет реагировать на щелчки, как маленький скрипт вашей кнопки тёмной темы, менять содержимое страницы или работать с данными из формы. Продолжайте с курсом JavaScript.