[turbo, tailwind] TurboRepo에 HeadlessUI를 사용해보기(기록용)

목차

 서론

여러 프로젝트를 개발하다보면 여러 디자인들이 필요한 경우가 많다. MUI나 Antd, BootStrap 등 그 디자인을 이쁘게 맞춰주는 프레임워크, 라이브러리 들이 있지만 한계치는 존재한다. 그래서 그 부분을 해결할 라이브러리를 찾던중 tailwindlabs에서 만든 headlessui라는 라이브러리를 찾게 되었다.

 

  HeadlessUI?

https://github.com/tailwindlabs/headlessui

GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Ta

 Headless UI 공식문서를 보면 다음과 같은 글이 적혀있다.

A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

 

직역하면 다음과 같다. ` 완전히 스타일이 지정되지 않은, 접근성이 완벽히 보장된 UI 컴포넌트 세트로, Tailwind CSS와 아름답게 통합되도록 설계되었습니다. `

 

 설치하기

필자는 모노레포에 사용할 것이기 때문에 vercel의 turbo repo를 세팅을한후 npm을 통해 설치를 할 예정이다.

packages의 ui폴더에 설치를해준다.

npm i @headlessui/react@latest --workspace=@repo/ui

 

그리고 /ui/src/button.tsx 에 다음과같이 headlessui의 버튼 코드를 가져온다.

import { Button } from '@headlessui/react'

export default function Example() {
    return (
        <Button className="inline-flex items-center gap-2 rounded-md bg-gray-700 py-1.5 px-3 text-sm/6 font-semibold text-white shadow-inner shadow-white/10 focus:outline-none data-[hover]:bg-gray-600 data-[open]:bg-gray-700 data-[focus]:outline-1 data-[focus]:outline-white">
            Save changes
        </Button>
    )
}

 

apps에 playground용으로 next프로젝트 만들기

apps로가서 npx create-next-app@14를 통해 playground라는 이름으로 갖고놀 프로젝트를 하나 생성한다.

turbo dev --filter=playground 로 실행해서 테스트하면된다.

 

tailwindcss 설치하기

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

headlessui에 tailwind를 적용할 예정이라 아래 명령어를 통해 설치해줄 예정이다.

npm install -D tailwindcss postcss --filter=playground

 

그리고 apps/playground로 이동후 아래 명령어 실행

npx tailwindcss init

 

/app/playground에다가 아래 파일들 생성

// apps/playground/postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
    },
};

 

// apps/playground/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,ts,jsx,tsx}",
        "../../packages/ui/src/**/*.{js,ts,jsx,tsx}" // UI 컴포넌트 경로 추가
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

 

// apps/playground/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

--- 아래는 건드리지 않음

 

 적용 확인하기

// apps/playground/src/app/page.tsx

import Button from '@repo/ui/button'
export default function Home() {
  return (
    <>
      <Button />
    </>
  );
}

위처럼 만든 Button컴포넌트 가져와보기

그럼 성공!

 

 마치며

필자는 tailwind를 써본적은 있으나 세팅을 해본적이 없기에 이번에 monorepo에 headlessUI를 세팅하면서 일부 삽질을 거쳤다..

이제 headlessUI를 통해 최대한 컴포넌트 스타일링의 자유도를 높이고 storybook도 짜볼까 생각중이다.