Домашняя страница Tailwind CSS
  1. Установка
  2. Установите Tailwind CSS с Gatsby

  1. Создайте свой проект

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

    Terminal
    gatsby new my-projectcd my-project

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

    Используя npm, установите tailwindcss и его одноранговые зависимости, а также gatsby-plugin-postcss, а затем запустите команду init для создания обоих tailwind.config.js и postcss.config.js.

    Terminal
    npm install -D tailwindcss@3 postcss autoprefixer gatsby-plugin-postcssnpx tailwindcss init -p

  3. Включить плагин Gatsby PostCSS

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

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

  4. Настройте пути к шаблону

    Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. Добавьте директивы Tailwind в свой CSS

    Создайте файл ./src/styles/global.css и добавьте директивы @tailwind для каждого слоя Tailwind.

    global.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

  7. Начните процесс сборки

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

    Terminal
    gatsby develop

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

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

    index.js
    export default function IndexPage() {
  return (
    <Layout>
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </Layout>
  )
}