Tailwind UI 설치

Tailwind UI 셋업 문서를 보면 Tailwind CSS 세팅이 Tailwind UI 세팅과 마찬가지다. Tailwind UI의 예전 버전은 별도의 npm 패키지를 설치해야 됐던 것으로 기억하는데 Tailwind CSS가 2(3까지..)로 버전업 되면서 바뀐듯.

Tailwind CLI를 통해서 설치를 진행했다. input.css를 컴파일한 output.css의 코드가 몇 줄 안 돼서 패키지를 빼먹은 것으로 착각했는데 알고보니 컴파일러가 html을 분석하여 사용한 클래스에 대해서만 output.css에 추가를 해준다. 따라서 tailwind.config.js의 content 부분에 html을 포함하고 html 파일도 src 디렉토리 밑에 배치해야 잘 작동한다.

몇 가지 Tailwind UI만의 설정도 필요하다. Inter라는 폰트 패밀리를 적용하고 @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio 같은 Tailwind UI용 플러그인을 사용여부에 따라 npm으로 설치 후 추가해줘야 한다.

# 플러그인 설치
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/aspect-ratio

플러그인의 사용여부는 컴포넌트 html 소스코드에 주석으로 설명되어 있다. 앞에서 말한 것들을 적용한 tailwind.config.js는 다음과 같다.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}