Оптимизация для Продакшена

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

В сочетании с минификацией и сетевым сжатием это обычно приводит к файлам CSS размером менее 10 КБ даже для крупных проектов. Например, Netflix использует Tailwind для Netflix Top 10, и весь веб-сайт предоставляет по сети только 6,5 КБ CSS.

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

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

Если вы используете Tailwind CLI, вы можете минимизировать свой CSS, добавив флаг --minify:

npx tailwindcss -o build.css --minify

Если вы установили Tailwind как плагин PostCSS, добавьте cssnano в конец списка плагинов:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

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