[번역] React와 Vue에서 Tailwind 사용하기

 

단순히 UI를 만드는데만 초점을 맞추는 것이 아니라 아름다운 반응형 웹 디자인을 통해 쉽고 빠르게 스타일링해서 당신의 아이디어를 빠르게 구현해 낼 수 있는 css프레임워크가 있습니다. 이미 Github나 nuxt.js와 같은 사이트들에서 사용하고 있는 tailwind를 함께 알아보고 자신 있게 당신의 프로덕트를 출시하세요.

 

 

Tailwind가 무엇인가요?

 

Tailwind UI 는 헤더, 푸터, form과 같은 입력 요소, 버튼과 같이 웹사이트를 구성하는 모든 컴포넌트들을 제공합니다. Tailwind를 사용하면 500여 개 이상의 반응성이 뛰어나며 전문적으로 설계된 component를 활용할 수 있을 뿐만 아니라, 각각의 component를 커스텀하게 개발 및 관리가 가능합니다.

 

Tailwind UI - Official Tailwind CSS Components & Templates

 

 

왜 Tailwind를 사용해야할까요?

프론트엔드 개발자는 수많은 화면을 구현해야 하고, 그 화면에 맞는 각각의 로직을 개발해야 합니다. 이런 과정을 매번 처음부터 반복하는 것은 매우 성가시고 귀찮은 일입니다. 우리는 프로덕트 자체에 집중하기 위해 form 데이터를 관리하거나 데이터와 함께 동작하는 것들, 또는 백엔드 서비스와 통합 등을 빠르게 추가하기 원합니다. 

 

웹사이트를 개발하는 데는 많은 시간이 소요됩니다. 우리는 반응형 웹디자인에 중점을 두고 모든 디바이스에서 사용할 수 있도록 한 후 각각의 요소들에 스타일을 추가하여 인터랙티브하고 아름답게 만듭니다. Tailwind는 개발자가 목표를 더 빠르게 달성할 수 있는 우아한 component를 제공하고 지원합니다. 특히 Tailwind에서 제공하는 모든 component는 웹 표준 및 웹 접근성을 준수하여 설계되었습니다. (웹 접근성은 선택적인 기능이 아니라 모든 사람이 기본적으로 누려야 할 권리에 대한 것입니다.)

 

 

Tailwind UI 시작하기

Tailwind UI를 시작하기에 앞서, 공식문서를 한 번 참고해주세요.
https://tailwindui.com/documentation

Tailwind UI - Official Tailwind CSS Components & Templates

Tailwind의 기본적인 설정부터 Tailwind UI를 사용하기 위한 대부분의 것들을 공식문서를 통해 배우고 습득할 수 있습니다.

 

 

Tailwind UI에서 제공하는 component들은 Tailwind CSS로 디자인되어있습니다. npm / yarn을 사용하여 설치합니다.

npm install tailwindcss@latest

yarn add tailwindcss@latest

 

Tailwind UI의 모든 예는 기본 Tailwind CSS 구성에 의존하고 있지만, 일부는 추가적인 first-party plugin에 의존하고 있습니다.

ex)
@tailwindcss/forms
@tailwindcss/typography
@tailwindcss/aspect-ratio

 

만약 React를 사용한다면?

React를 위한 Tailwind UI는 Headless UI를 기반으로 실행됩니다. 이를 위해 두 가지 라이브러리를 프로젝트에 추가해야 합니다.

 

npm install @headlessui/react @heroicons/react

yarn add @headlessui/react @heroicons/react

 

만약 Vue를 사용한다면?

Vue를 위한 Tailwind UI도 React의 경우와 마찬가지로 Headless UI를 기반으로 실행됩니다. 이를 위해 두 가지 라이브러리를 프로젝트에 추가해야 합니다.

 

npm install @headlessui/vue @heroicons/vue

yarn add @headlessui/vue @headlessui/vue

 

선택사항

Tailwind UI는 모든 예제에 inter font family를 사용하며 이는 오픈소스이며 무료로 사용이 가능합니다. 프로젝트에서 원하는 글꼴을 설정하여 사용하는 것도 가능한데, Inter font를 사용하기 위해 CDN을 통해 글꼴을 추가하는 것이 가장 간단하고 편한 방법입니다.

 

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

 

그런 다음 "Inter var"를 tailwind.config.js의 "sans"에 추가해주세요.

 

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}

 

React와 Vue의 모든 예제는 단일 component로 제공됩니다. Tailwind UI를 자체 프로젝트에 적용하게 되는 경우, 필요에 따라 Tailwind에서 제공하는 예제보다 더 작은 구성요소로 분류하여 적용해야 합니다.

 

그래서 Tailwind는 사용할 만한가요?

개인 또는 비즈니스용으로 웹사이트를 자주 구축해야 하는 환경에 있는 개발자라면, 당연히 사용할 만합니다. 단순히 클래스명을 설정하는 것만으로도 번거로운 css 스타일링을 대신할 수 있으니 구현하는 방식에 따라 세련된 스타일링 또한 가능합니다. 웹 디자인에 집중하기보다는 웹 개발 영역에 초점을 맞춘다면 Tailwind UI를 통해 실제 제품 개발에 좀 더 몰입하는데 도움이 될 것입니다.

 

 

 

원문: https://harshilmoradia.medium.com/using-tailwind-ui-in-react-and-vue-7636d8c995cc

Using Tailwind UI in React and Vue