Как установить TailwindCSS в ваш проект NextJS ⚡️

Введение

В этом посте вы узнаете, как настроить ваш проект NextJS для использования TailwindCSS в качестве утилиты для создания стилей.

Требования

Прежде чем мы начнем, вам понадобятся две вещи:

1. Node JS, установленный на вашей машине. Я всегда рекомендую LTS (v16), так как она имеет самую широкую поддержку и доставит вам меньше головной боли при выполнении подобных руководств.
2. IDE, я использую VS Code

С этим покончено, давайте приступим!

У нас есть два варианта создания проекта NextJS с помощью Tailwinds.

Вариант 1 (Самый быстрый ⚡️)

Одна из действительно приятных вещей, которую я обнаружил в NextJS, заключается в том, что у них есть очень хорошая библиотека «примеров», как они их называют, которые по сути являются просто кучей готовых шаблонов для различных начальных точек проекта.

И в данном случае у них есть пример NextJS-with-TailwindCSS.

Установить этот пример проще некуда! Выполните приведенную ниже команду в окне терминала в месте расположения файла, с которого вы хотите начать свой новый проект:

npx create-next-app --example with-tailwindcss my-app

Или для пользователей yarn:

yarn create next-app --example with-tailwindcss my-app

Вот и все! 🎉

теперь мы можем запускать:

cd my-app
npm run dev
or
yarn dev

и вы должны увидеть страницу сайта NextJS boilerplate в вашем браузере.

Слишком просто, да? 🧐

Вариант 2 🛠

Вариант 2 начинается так же, но мы будем использовать базовую команду Create-NextJS.

В терминале выполните следующее:

npx create-next-app my-app

Далее зайдите в папку my-app:

cd my-app

Мы собираемся выполнить несколько команд, специфичных для Tailwind.

Первая из них:

npm install -D tailwindcss postcss autoprefixer

Это установит tailwindcss в качестве dev-зависимости в ваш файл «package.json». А также установит postcss и autoprefixer, которые являются основными элементами работы tailwindcss.

Далее мы создадим конфигурационный файл tailwinds, выполнив эту команду:

npx tailwindcss init -p

Теперь внутри этого вновь созданного файла «tailwind.config.js» мы вставим массив содержимого со всеми типами файлов в нашем проекте. Убедитесь, что добавили все типы файлов или маршруты, которые специфичны для вашего проекта, чтобы использовать tailwindcss в них:

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

Далее мы изменим содержимое файла «./styles/css/global.css». Вы можете удалить все содержимое этого файла и заменить его приведенным ниже кодом:

@tailwind base;
@tailwind components;
@tailwind utilities;

Последний шаг — запуск нашего dev-сервера:

npm run dev
or
yarn dev

и затем сделайте новый элемент в нашем файле «index.js», чтобы проверить, работает ли tailwindcss (опять же, вы можете удалить весь шаблонный код). В данном случае я создал тег H1 с несколькими классами tailwindcss для тестирования.

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

Если ваш заголовок H1 отображается как более крупный полужирный текст с подчеркиванием, то поздравляем! 🎉 Tailwindcss работает!

Теперь, после того, как вы увидели, как легко было запустить вариант 1, вы можете задаться вопросом, почему вы должны делать это по-другому? Особенно, если вы используете TailwindCSS с другим фреймворком, вы знаете, насколько сложным может быть процесс настройки.

Вариант 2 может потребоваться, если вы работаете в команде и вам нужно создать проект с нуля, чтобы соблюсти строгие настройки среды/переменных, установленные вашей командой. Или вы используете другой пример NextJS, например, Auth0, поэтому вы уже пользуетесь функцией быстрого запуска.

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

Если вам понравилось или вы узнали что-то новое из этой статьи, пожалуйста, поставьте лайк и следите за мной, чтобы узнать больше! 🙏