Vue Storefront 2에 TailwindCSS를 추가하는 방법

TailwindCSS는 시장에서 최고의 CSS 프레임워크가 되고 있습니다. 좋든 싫든 점점 더 많은 응용 프로그램에서 사용되고 있으며 일부 인기 있는 프로젝트의 기본으로 제공되고 있습니다. 단순성과 많은 개발자 경험 개선으로 인해 Tailwind는 DX 갱단에 합류하여 그곳에서 안전한 위치를 차지했습니다.

이 기사에서는 TailwindCSS를 Vue Storefront 프로젝트에 추가하는 과정을 안내해 드리고자 합니다. Storefront UI 스타일의 대안으로 사용하거나 함께 사용할 수 있습니다.

뷰 스토어프론트

아직 Vue Storefront에 익숙하지 않다면 헤드리스 상거래를 위한 번개처럼 빠른 프런트엔드 플랫폼입니다. Vue Storefront를 사용하여 사이트 성능을 높이고 고객 여정을 형성하며 개발자의 창의성을 자유롭게 하십시오. 마지막 프런트엔드입니다.



여기에서 자세한 내용을 확인할 수 있습니다.

Portfolio

Docs

매장 UI

Vue Storefront는 기본적으로 Storefront UI라는 매우 유용한 UI 라이브러리를 사용합니다. Google for Retail 보고서, 특히 전자 상거래를 기반으로 설계되었습니다. 실제로 사용자 정의가 가능하며 전자 상거래 애플리케이션의 개발을 1마일까지 가속화할 수 있습니다!



여기에서 자세한 내용을 읽을 수 있습니다.

Portfolio

Docs

VSF에 TailwindCSS 추가

Vue Storefront는 내부적으로 Nuxt.js를 사용하므로 이를 프로젝트에 추가하는 프로세스는 비교적 간단합니다. 특히 최근 출시된 새 버전Tailwind Module for Nuxt에서는 코드here를 확인할 수 있습니다. 이 버전에서는 작동시키기 위해 nuxt 애플리케이션에 tailwind 구성이나 postcss 구성을 등록할 필요가 없습니다. 얼마나 훌륭합니까?

Vue Storefront 애플리케이션에 Tailwind 모듈을 설치하려면 다음을 실행해야 합니다.

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">

결과는 다음과 같습니다.

요약

잘했어요! Vue Storefront 프로젝트에 TailwindCSS를 성공적으로 추가했습니다. 그러나 Storefront UI는 즉시 TailwindCSS와 함께 작동하도록 설계되지 않았으므로 스타일을 교체하려면 여러 CSS 변수를 조정해야 하며 이 프로세스가 설명되어 있습니다here.