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

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

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

npx create-next-app -e with-tailwindcss my-project
cd my-project

Это автоматически настроит вашу настройку Tailwind на основе официального примера Next.js. Если вы хотите настроить Tailwind вручную, продолжайте до конца этого руководства.

Настройка Tailwind CSS

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

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

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

# Если вы на Next.js v10 или новее
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# Если вы на Next.js v9 или старше
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next.js v9 и старше не пока поддерживает PostCSS 8 поэтому вам необходимо установить сборку совместимости с Tailwind CSS v2.0 PostCSS 7, как мы показали выше.

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

Затем сгенерируйте свои(й) 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: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

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

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

При включении Tailwind в свой CSS в проекте Next.js можно использовать два подхода.

Импортируйте Tailwind прямо в ваш JS

Если вы не планируете писать какой-либо собственный CSS в своем проекте, самый быстрый способ включить Tailwind - это импортировать его прямо в pages/_app.js:

  // pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

Если вы не планируете их использовать, вы можете безопасно удалить любые CSS-файлы, которые Next.js создает для вас по умолчанию, например, globals.css и Home.module.css. Убедитесь, что вы удалили все ссылки на них и в своих компонентах.

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

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

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

Наконец, убедитесь, что ваш файл CSS импортируется в ваш компонент pages/_app.js:

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Если вы решили использовать файл, отличный от файла по умолчанию globals.css, вы захотите соответствующим образом обновить импорт.

Вы закончили! Теперь, когда ты бежишь npm run dev, Tailwind CSS будет готов к использованию в вашем проекте Next.js.

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