Введение
В этом посте вы узнаете, как настроить ваш проект NextJS для использования TailwindCSS в качестве утилиты для создания стилей.
Требования
Прежде чем мы начнем, вам понадобятся две вещи:
- Node JS, установленный на вашей машине. Я всегда рекомендую LTS (v16), так как она имеет самую широкую поддержку и доставит вам меньше головной боли при выполнении подобных руководств.
- 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.
Если вам понравилось или вы узнали что-то новое из этой статьи, пожалуйста, поставьте лайк и следите за мной, чтобы узнать больше! 🙏