Как добавить TailwindCSS в Vue Storefront 2

TailwindCSS становится фреймворком CSS номер один на рынке. Нравится вам это или нет, но он используется во все большем количестве приложений, а также становится по умолчанию в некоторых популярных проектах. Благодаря своей простоте и множеству улучшений для разработчиков, Tailwind присоединился к банде DX и занимает там надежную позицию.

В этой статье я хотел бы провести вас через процесс добавления TailwindCSS в ваш проект Vue Storefront. Его можно использовать как альтернативу стилям пользовательского интерфейса Storefront или применять вместе с ним.

Vue Storefront

Если вы еще не знакомы с Vue Storefront, то это молниеносная фронтенд-платформа для безголовой торговли. Повысьте производительность вашего сайта, сформируйте путешествие клиента и освободите творческий потенциал вашего разработчика с помощью Vue Storefront — последнего фронтенда, который вам когда-либо понадобится.

Вы можете узнать больше об этом здесь:

  • Портфолио
  • Документы

Пользовательский интерфейс Storefront

Vue Storefront по умолчанию использует действительно полезную библиотеку пользовательского интерфейса под названием Storefront UI. Она была разработана на основе отчета Google for Retail и специально для электронной коммерции. Она действительно настраиваемая и позволяет ускорить разработку вашего приложения для электронной коммерции на целую милю!

Подробнее о нем вы можете прочитать здесь:

  • Портфолио
  • Документы

Добавление TailwindCSS в VSF

Поскольку Vue Storefront использует Nuxt.js под капотом, процесс добавления его в ваш проект относительно прост. Особенно с недавним выпуском новой версии модуля Tailwind для Nuxt, код которого вы можете посмотреть здесь. В этой версии вам не нужно регистрировать tailwind config или postcss config в вашем nuxt-приложении, чтобы заставить его работать. Как это здорово!

Для того чтобы установить модуль Tailwind в приложение Vue Storefront, нам нужно выполнить:

yarn add @nuxtjs/tailwindcss # npm install @nuxtjs/tailwindcss
Войти в полноэкранный режим Выйти из полноэкранного режима

Затем нам нужно зарегистрировать его в массиве modules нашего файла nuxt.config.js:

  modules: [
    // Other modules
    '@nuxtjs/tailwindcss'
  ],
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, чтобы проверить, работает ли это, мы можем добавить несколько стилей Tailwind в наш компонент-обертку:

<div id="home" class="bg-blue-300">
Войти в полноэкранный режим Выйти из полноэкранного режима

И это должен быть результат:

Summary

Отлично! Вы успешно добавили TailwindCSS в свой проект Vue Storefront. Однако имейте в виду, что Storefront UI не был разработан для работы с TailwindCSS из коробки, поэтому для замены стилей вам придется настроить несколько переменных CSS, и этот процесс описан здесь

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