Just-in-Time: Следующее поколение Tailwind CSS
Узнать больше →
Tailwind CSS home page
Tailwind CSS на GitHubTailwind CSS в Telegram

Установка

Узнайте, как запустить Tailwind CSS в своем проекте.

Руководства по интеграции

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

Next.js
Vue 3 (Vite)
Laravel
Nuxt.js
Create React App
Gatsby

Не видите свой любимый инструмент в списке? Мы постоянно работаем над новыми руководствами, но пока вы можете следовать инструкциям по установке Tailwind CSS в качестве плагина PostCSS вместо этого, чтобы получить настроен в кратчайшие сроки.

Установка Tailwind CSS в качестве плагина PostCSS

Tailwind CSS требует Node.js 12.13.0 или выше.

Для большинства реальных проектов мы рекомендуем установить Tailwind как плагин PostCSS. Большинство современных фреймворков уже используют PostCSS под капотом, и есть большая вероятность, что вы использовали или в настоящее время используете другие плагины PostCSS, такие как autoprefixer.

Если вы никогда не слышали о PostCSS или вам интересно, чем он отличается от таких инструментов, как Sass, прочтите наше руководство по использованию PostCSS в качестве препроцессора для введения.

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

Установить Tailwind через npm

Для большинства проектов (и для того, чтобы воспользоваться возможностями настройки Tailwind), вам нужно установить Tailwind и его одноранговые зависимости через npm.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Поскольку Tailwind не добавляет автоматически префиксы поставщиков в создаваемый им CSS, мы рекомендуем установить autoprefixer для решения этой проблемы для Вас, как мы показали в приведенном выше фрагменте.

Если вы интегрируете Tailwind с инструментом, основанным на более старой версии PostCSS, вы можете увидеть такую ошибку:

Ошибка: Плагин PostCSS tailwindcss требует PostCSS 8.

В этом случае вам следует вместо этого установить сборку совместимости с PostCSS 7.

Добавить Tailwind как плагин PostCSS

Добавьте tailwindcss и autoprefixer в Вашу конфигурацию PostCSS. В большинстве случаев это файл postcss.config.js в корне Вашего проекта, но это также может быть файл .postcssrc или ключ postcss в Вашем файле package.json.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Если вы не уверены, где настраиваются плагины PostCSS для используемых Вами инструментов, вам нужно обратиться к документации по этим инструментам, чтобы узнать, где это должно происходить. Поиск по запросу “configure postcss {my tool}” тоже даст вам ответ довольно быстро.

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

Создайте свой файл конфигурации

Если вы хотите настроить установку Tailwind, сгенерируйте файл конфигурации для своего проекта с помощью утилиты Tailwind CLI, включенной при установке пакета npm tailwindcss:

npx tailwindcss init

Это создаст минимальный файл tailwind.config.js в корне Вашего проекта:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // или 'media' или 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Узнайте больше о настройке Tailwind в документации по конфигурации.

Включите Tailwind в свой CSS

Создайте файл CSS, если у вас его еще нет, и используйте директиву @tailwind для внедрения стилей Tailwind base, components и utilities:

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе Вашей настроенной дизайн-системы.

Если вы используете postcss-import (или инструмент, который использует его под капотом, например Webpacker для Rails), используйте наш импорт вместо директивы @tailwind, чтобы избежать проблем при импорте любых Ваших собственных дополнительных файлов:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Если вы работаете в среде JavaScript, такой как React или Vue, которая поддерживает прямой импорт файлов CSS в ваш JS, вы также можете полностью отказаться от создания файла CSS и вместо этого импортировать tailwindcss/tailwind.css, в котором все эти директивы уже есть в место:

// app.js
import "tailwindcss/tailwind.css"

Создание Вашего CSS

То, как вы на самом деле создаете свой проект, будет зависеть от инструментов, которые вы используете. Ваша структура может включать команду типа npm run dev для запуска сервера разработки, который компилирует ваш CSS в фоновом режиме, вы можете запускать webpack самостоятельно, или, может быть, вы используете postcss-cli и запускаете такую команду, как postcss styles.css -o compiled.css.

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

При сборке для производства не забудьте настроить опцию purge, чтобы удалить все неиспользуемые классы для файла наименьшего размера:

  // tailwind.config.js
  module.exports = {
+   purge: [
+     './src/**/*.html',
+     './src/**/*.js',
+   ],
    darkMode: false, // или 'media' или 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

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

Если вы интегрируете Tailwind с инструментом, основанным на более старой версии PostCSS, вы можете увидеть такую ошибку при попытке создать свой CSS:

Ошибка: Плагин PostCSS tailwindcss требует PostCSS 8.

В этом случае вам следует вместо этого переключиться на нашу сборку совместимости с PostCSS 7.

Использование Tailwind CLI

Tailwind CSS требует Node.js 12.13.0 или выше.

Если вы хотите скомпилировать свой CSS с помощью Tailwind, не интегрируя его напрямую в какие-либо инструменты сборки, вы можете использовать инструмент Tailwind CLI для создания своего CSS без настройки PostCSS или даже установки Tailwind в качестве зависимости, если вы не хотите .

Используйте npx, инструмент, который автоматически устанавливается вместе с npm, чтобы сгенерировать полностью скомпилированный файл CSS Tailwind:

npx tailwindcss -o tailwind.css

Это создаст файл с именем tailwind.css , сгенерированный на основе конфигурации Tailwind по умолчанию, и автоматически добавит любого необходимого поставщика префиксов с использованием autoprefixer.

Теперь вы можете вставить этот файл в свой HTML, как и любую другую таблицу стилей:

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

Следите за изменениями

Вы можете использовать флаг --watch или -w, чтобы запустить процесс просмотра и автоматически перестраивать свой CSS каждый раз, когда вы вносите какие-либо изменения:

npx tailwindcss -o tailwind.css --watch

Использование собственного файла CSS

Если вы хотите обрабатывать любой пользовательский CSS вместе со стилями по умолчанию, которые генерирует Tailwind, создайте файл CSS в любом месте и используйте директиву @tailwind для включения стилей Tailwind base, components и utilities:

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-600 text-white rounded;
  }
}

Затем укажите путь к этому файлу при создании CSS:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Прочтите о добавлении базовых стилей, извлечении компонентов, и добавлении новых утилит, чтобы узнать больше о добавлении пользовательского CSS поверх Tailwind.

Настройка Вашей конфигурации

Если вы хотите настроить то, что генерирует Tailwind, создайте файл tailwind.config.js с помощью инструмента Tailwind CLI:

npx tailwindcss init

Это создаст минимальный файл tailwind.config.js в корне Вашего проекта:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // или 'media' или 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Этот файл будет автоматически прочитан при создании вашего CSS с помощью Tailwind CLI:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Если вы хотите сохранить файл конфигурации в другом месте или дать ему другое имя, передайте путь к файлу конфигурации, используя параметр -c при создании CSS:

npx tailwindcss -i ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

Узнайте больше о настройке Tailwind в документации по конфигурации.

Отключение Autoprefixer

По умолчанию инструмент Tailwind CLI будет запускать ваш CSS через Autoprefixer для добавления любых необходимых префиксов поставщиков. Если у вас уже есть Autoprefixer, настроенный в конвейере сборки где-то дальше по цепочке, вы можете отключить его в инструменте Tailwind CLI с помощью флага --no-autoprefixer, чтобы не запускать его дважды:

npx tailwindcss --no-autoprefixer -o tailwind.css

Использование пользовательской конфигурации PostCSS

Если вы хотите использовать другие плагины PostCSS вместе с Tailwind, вы можете создать файл postcss.config.js в корне вашего проекта, чтобы добавить дополнительные плагины, и Tailwind будет включать их, если вы используете флаг --postcss, когда создание вашего CSS:

npx tailwindcss --postcss -o tailwind.css
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-100vh-fix'),
  ]
}

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

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-100vh-fix'),
  ]
}

Если вы хотите автоматически сгенерировать базовый файл postcss.config.js при создании файла tailwind.config.js, используйте флаг --postcss или -p при инициализации файла конфигурации:

npx tailwindcss init --postcss

Сборка для продакшена

При сборке для продакшена установите NODE_ENV=production в командной строке при сборке CSS:

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Это гарантирует, что Tailwind удалит все неиспользуемые CSS для лучшей производительности. Прочтите наше отдельное руководство по оптимизации для продакшена, чтобы узнать больше.

Вы также можете использовать флаг --minify для сжатия вашего CSS с помощью cssnano:

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --minify

Использование Tailwind через CDN

Перед использованием сборки CDN обратите внимание, что многие функции, которые делают Tailwind CSS отличным, недоступны без включения Tailwind в процесс сборки.

  • вы не можете настроить тему по умолчанию Tailwind
  • вы не можете использовать такие директивы, как @apply, @variants и т.д.
  • вы не можете включить дополнительные варианты, например group-focus
  • вы не можете устанавливать сторонние плагины
  • вы не можете избавиться от неиспользуемых стилей

Чтобы получить максимальную отдачу от Tailwind, вам действительно следует установить его как плагин PostCSS.

Чтобы использовать Tailwind для быстрых демонстраций или просто попробовать фреймворк, загрузите последнюю сборку конфигурации по умолчанию через CDN:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

NotОбратите внимание, что, хотя сборка CDN велика (72.8kB в сжатом виде, 2936.0kB в исходном), она не соответствует размерам, которые вы видите при включении Tailwind как части процесса сборки..

Сайты, которые следуют нашим лучшим практикам, почти всегда имеют после сжатия менее 10КБ.

HTML стартовый шаблон

Чтобы стили Tailwind работали должным образом, вы захотите использовать тип документа HTML5 и включить метатег адаптивного окна просмотра для правильной обработки адаптивных стилей на всех устройствах.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/path/to/tailwind.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

Многие интерфейсные фреймворки, такие как Next.js, vue-cli и другие, делают все это за вас за кулисами автоматически, поэтому в зависимости от того, что вы создаете, Вам, возможно, не нужно это настраивать.

Сборка совместимости с PostCSS 7

Начиная с версии 2.0, Tailwind CSS зависит от PostCSS 8. Поскольку PostCSS 8 всего несколько месяцев, многие другие инструменты в экосистеме еще не обновлены, что означает, что вы можете увидеть такую ошибку в своем терминале после установки Tailwind и пытаемся скомпилировать ваш CSS:

Ошибка: Плагин PostCSS tailwindcss требует PostCSS 8.

Чтобы сократить разрыв до тех пор, пока все не обновятся, мы также публикуем сборку совместимости с PostCSS 7 как @tailwindcss/postcss7-compat на npm.

Если вы столкнулись с упомянутой выше ошибкой, удалите Tailwind и переустановите его, используя вместо этого сборку совместимости:

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

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

После того, как остальные Ваши инструменты добавят поддержку PostCSS 8, вы можете отказаться от сборки совместимости, переустановив Tailwind и его одноранговые зависимости, используя тег latest:

npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Edit this page on GitHub