Сборка для публикации

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

Как Tailwind находит классы

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

Автоматически просматриваются все файлы проекта, кроме:

• файлов и папок из .gitignore;
• папки node_modules;
• бинарных файлов вроде картинок;
• CSS-файлов и файлов блокировки пакетов.

Сборка с Vite

В проекте на Vite достаточно одной команды:

npm run build

В папке dist появится готовый сайт, а в dist/assets — CSS-файл с хешем в имени, например index-4f2a9c.css. В нём только использованные утилиты, и он уже сжат. Проверить результат локально можно командой npm run preview.

Сборка через CLI

Если вы используете CLI, добавьте флаг --minify:

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

Файл dist/output.css — то, что выкладывают на сервер вместе с HTML.

Дополнительные источники

Если классы лежат там, куда Tailwind не смотрит, — например, в пакете компонентов внутри node_modules, — путь добавляют директивой @source в главном CSS-файле. Путь указывают относительно этого файла:

@import "tailwindcss";
 
@source "../node_modules/@my-shop/ui";

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

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

// src/components/StatusBadge.jsx
export default function StatusBadge({ color, children }) {
  return <span className={`bg-${color}-100 text-${color}-800`}>{children}</span>;
}

В исходниках нет строк bg-green-100 и text-green-800, и в итоговом CSS их тоже не будет. Пишите имена целиком:

// src/components/StatusBadge.jsx
const colors = {
  paid: 'bg-green-100 text-green-800',
  pending: 'bg-amber-100 text-amber-800',
};
 
export default function StatusBadge({ status, children }) {
  return <span className={colors[status]}>{children}</span>;
}

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