Установка Tailwind CSS с Gatsby

Настройка Tailwind CSS в проекте Gatsby.

Создайте ваш проект

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

Терминал

gatsby new my-projectcd my-project

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

Используя npm, установите @tailwindcss/postcss, его peer зависимости и gatsby-plugin-postcss.

Терминал

npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss

Включите Gatsby PostCSS плагин

В вашем файле gatsby-config.js включите gatsby-plugin-postcss. Смотрите документацию плагина для получения дополнительной информации.

gatsby-config.js

module.exports = {  plugins: [    'gatsby-plugin-postcss',    // ...  ],}

Настройте PostCSS плагины

Создайте файл postcss.config.js в корне вашего проекта и добавьте @tailwindcss/postcss плагин в вашу PostCSS конфигурацию.

postcss.config.js

module.exports = {  plugins: {    "@tailwindcss/postcss": {},  },};

Импортируйте Tailwind CSS

Создайте файл ./src/styles/global.css и добавьте @import для Tailwind CSS.

global.css

@import "tailwindcss";

Импортируйте CSS файл

Создайте файл gatsby-browser.js в корне вашего проекта, если он еще не существует, и импортируйте ваш недавно созданный файл ./src/styles/global.css.

gatsby-browser.js

import './src/styles/global.css';

Запустите процесс сборки

Запустите процесс сборки с помощью gatsby develop.

Терминал

gatsby develop

Начните использовать Tailwind в вашем проекте

Начните использовать утилитарные классы Tailwind для стилизации вашего контента.

index.js

export default function IndexPage() {  return (    <Layout>      <h1 className="text-3xl font-bold underline">        Привет, мир!      </h1>    </Layout>  )}