daisyUI 사용하기

개요

스타일링을 위해 Tailwind CSS를 사용하면 미리 정해진 클래스들을 사용해서 빠르게 스타일링이 가능하다는 장점이 있다. 그 대신 사용하는 클래스가 많아지게 된다면 클래스 네임이 너무 길어지게 된다. 그에 대한 대안으로 Tailwind CSS 기반의 라이브러리를 추가하여 해결할 수 있다.

Tailwind CSS 기반의 라이브러리 중 하나인 daisyUI를 사용해보자.

daisyUI 설치하기

아래 명령어를 사용해서 daisyUI를 설치한다. 개발할 때만 필요한 패키지이므로, -D를 사용해서 devDependency로 추가하자.

npm i -D daisyui@latest

설치가 완료되면, tailwind.config.js의 플러그인에 daisyUI를 추가한다.

module.exports = {
  //...
  plugins: [require('daisyui')],
};

※ daisyUI는 @tailwindcss/typography에 몇몇 스타일을 추가해 서로 다른 요소들이 같은 테마를 사용할 수 있게 하기 때문에 꼭 @tailwindcss/typography 다음에 daisyui를 require 해야 한다.

module.exports = {
  //...
  plugins: [require('@tailwindcss/typography'), require('daisyui')],
};

daisyUI 컴포넌트 사용하기

이제 daisyUI 공식 홈페이지에 있는 컴포넌트들의 class를 참고해서 적용하면 된다.

예를 들어, 버튼을 구현하는 방법에 대해 살펴보자.

• 기존 TailwindCSS의 유틸리티 클래스만으로 버튼을 구현하게 되면 대략적으로 아래와 같은 클래스들이 필요하다.

  <button
    class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold text-white uppercase transition duration-200 ease-in-out hover:bg-gray-900"
  >
    Button
  </button>

• 아래와 같이 btn class를 사용해서 이를 대체할 수 있다.

  <button class="btn">Button</button>

• 기존 btn class에 대해 추가적인 커스텀이 필요하다면, btn-primary, btn-ghost 처럼, 이미 만들어진 daisyUI의 유틸리티 클래스를 추가해서 커스터마이징 할 수도 있다.

  <button class="btn btn-primary">Button</button>

  <button class="btn btn-ghost">Button</button>

• 또한, TailwindCSS에서 기본으로 제공하는 유틸리티 클래스를 추가해서 커스텀하는 것도 가능하다.

  <button class="btn w-64 rounded-full">Button</button>

• css 파일에서 Tailwind의 @apply를 사용해서 스타일을 수정할 수도 있다. 예를 들어, 모든 버튼에 공통적으로 수정할 필요가 있다면 아래와 같이 변경할 수 있다.

  .btn {
    @apply rounded-full;
  }

결론

daisyUI를 적용해서 컴포넌트의 스타일 코드를 개선할 수 있었다!

참고: daisyUI 공식 홈페이지