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

Если вы ищете CSS-фреймворк, который дает вам возможность полностью настраивать компоненты прототипа или веб-приложения, вам определенно стоит попробовать tailwindcss.

В этой статье я расскажу вам, как установить и настроить tailwindcss с помощью фреймворка Next.js.

Знакомство с фреймворками.

Если вы не знакомы с этими фреймворками,

Tailwindcss: это первый CSS-фреймворк, который помогает быстро создавать красивые пользовательские интерфейсы, используя легко запоминающиеся имена классов.

Next.js: Это JavaScript-фреймворк на основе react для создания современных приложений. Next.js добавляет в react рендеринг на стороне сервера (SSR), генерацию статических сайтов (SSG) и многие другие функции, а также оптимизирован для поисковых систем.

Итак, давайте приступим.

Запуск нового проекта Next.js.

Шаг 1: Создайте новое приложение Next.js.
Чтобы создать новое приложение Next, выполните следующий код в терминале. Обратите внимание, что для Next.js требуется Node 12 и выше.

npx create-next-app project-name

И перейдите в каталог вашего проекта:

cd project-name

Шаг 2: Установите tailwindcss.
Как только вы окажетесь в директории проекта, выполните следующий код для установки tailwindcss и его зависимостей.

npm install -D tailwindcss postcss autoprefixer

После успешной установки tailwind создайте файл конфигурации tailwind, выполнив следующий код.

npx tailwindcss init -p

Команда -p создает конфигурационный файл postcss в директории проекта.

Теперь ваша директория должна выглядеть следующим образом с двумя конфигурационными файлами

Шаг 3: Настройка путей к шаблонам.
По умолчанию все классы tailwinds добавлены в ваш проект, чтобы убедиться, что только классы, которые вы использовали в проекте, будут экспортированы с вашим окончательным кодом, нам нужно очистить наш CSS.

В конфигурационном файле tailwind добавьте следующий код в свойство content. Этот код указывает tailwind, где были использованы классы tailwind.

"./pages/**/*.js"

Путь к файлу: код указывает tailwind искать в папке pages корневого каталога ./pages/ файл .js или любую папку **/ с .js файлом *.js внутри.

Обратите внимание, что вы можете добавить массив путей к файлам в свойство content.

Шаг 4: Добавьте директивы tailwindcss в файл global.css.
Для добавления директив tailwindcss перейдите в файл global.css в папке styles и добавьте следующий код.

@tailwind base;
@tailwind components;
@tailwind utilities;
Вход в полноэкранный режим Выйти из полноэкранного режима

Создание базовой карты с помощью tailwind.

Когда все настроено и готово, давайте сделаем карточку, чтобы проверить, правильно ли установлен tailwind.

В файле index.js замените содержимое на следующий код.

export default function Home() {
  return (
    <div className="w-1/2 mt-32 mx-auto  bg-blue-900 p-10">
      <p className="m-4 text-gray-200">
        Cillum consequat eiusmod adipisicing sint qui mollit. Ut et tempor nulla
        excepteur nulla incididunt qui exercitation incididunt. Sint ex
        adipisicing pariatur nulla ut ex laborum consequat enim. Et non tempor
        laborum irure commodo fugiat mollit nostrud adipisicing nostrud eiusmod
        do. Elit velit amet do enim esse ex ipsum velit. Quis consequat sunt
        dolore dolor commodo enim anim tempor ipsum.
      </p>
    </div>
  );
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Код представляет собой простой HTML-код с тегом p внутри div и классами tailwind, добавленными для стилизации.

Запустите npm run dev в терминале и откройте localhost:3000 в браузере.

Результат должен выглядеть так, как показано на рисунке ниже

Заключение

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

Если вы хотите изучить уроки tailwinds с помощью видеоуроков, как это сделал я, посмотрите это видео на youtube от Scrimba.

Оцените статью
devanswers.ru
Добавить комментарий