Как внедрить Tailwind CSS в проект Next.js?

@rachel 

Чтобы внедрить Tailwind CSS в проект Next.js, выполните следующие шаги.

1. Создайте новый проект Next.js (если он ещё не создан): Если у вас еще нет проекта Next.js, вы можете создать его с помощью следующей команды: npx create-next-app my-nextjs-app Перейдите в директорию проекта: cd my-nextjs-app
2. Установите Tailwind CSS: Используйте npm или yarn, чтобы установить необходимые зависимости: npm install tailwindcss postcss autoprefixer Или, если используете yarn: yarn add tailwindcss postcss autoprefixer
3. Инициализируйте Tailwind CSS: Инициализируйте Tailwind CSS, чтобы создать конфигурационные файлы tailwind.config.js и postcss.config.js: npx tailwindcss init -p
4. Настройте tailwind.config.js: Отредактируйте файл tailwind.config.js, чтобы указать, где будут использоваться классы Tailwind CSS. Обычно это файл будет выглядеть так: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
5. Добавьте Tailwind CSS к стилям глобально: Создайте или отредактируйте файл styles/globals.css и добавьте туда директивы для Tailwind: @tailwind base; @tailwind components; @tailwind utilities; Убедитесь, что globals.css импортируется в файле _app.js или _app.tsx: // pages/_app.js import '@/styles/globals.css' function MyApp({ Component, pageProps }) { return
6. Запустите проект: Теперь вы можете запустить ваше приложение Next.js с Tailwind CSS: npm run dev Или, если вы используете yarn: yarn dev

После этих шагов Tailwind CSS интегрирован в ваш проект Next.js, и вы можете начать использовать utility-классы Tailwind для построения пользовательского интерфейса.