Установите Tailwind CSS с Gatsby

Создание вашего проекта

Начните с создания нового проекта Gatsby, если у вас его еще нет. Самый распространенный подход - использовать Gatsby CLI:

gatsby new my-project
cd my-project

Настройка Tailwind CSS

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

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

Устанавливаем gatsby-plugin-postcss, а также Tailwind его одноранговые зависимости, используя npm:

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

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

Затем сгенерируйте свои(й) tailwind.config.js и postcss.config.js файлы:

npx tailwindcss init -p

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

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

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

Он также создаст файл postcss.config.js, который включает уже настроенные файлы tailwindcss и autoprefixer:

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

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

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

В вашем файле tailwind.config.js, настройте опцию purge, указав пути ко всем вашим страницы и компоненты, чтобы Tailwind мог изменять дерево неиспользуемых стилей в производственных сборках:

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./src/**/*.{js,jsx,ts,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

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

Включить gatsby-plugin-postcss

В вашем файле gatsby-config.js, включите плагин postcss.

  // gatsby-config.js
  module.exports = {
    /* Your site config here */
-   plugins: [],
+   plugins: ['gatsby-plugin-postcss'],
  }

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

Создать ./src/styles/global.css файл , и используйте директиву @tailwind, чтобы включить утилиты Tailwind base, components и utilities стили, заменяющие исходное содержимое файла:

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

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

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

Наконец, создайте файл ./gatsby-browser.js в корне вашего проекта, если он еще не существует, и импортируйте свой файл CSS:

  // ./gatsby-browser.js
+ import './src/styles/global.css';

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

Вы закончили! Теперь, когда ты бежишь gatsby develop, Tailwind CSS будет готов к использованию в вашем проекте Gatsby.

Далее узнайте о рабочем процессе “сначала утилиты” →