인프런 커뮤니티 질문&답변

Tailwind CSS에서 중첩된 리스트의 불릿 스타일을 다르게 지정하려면 몇 가지 방법이 있습니다.

방법 1: 전역 스타일 추가하기

globals.css 파일에 직접 CSS를 추가하는 방법입니다:

/* globals.css 파일에 추가 */
ul {
  list-style-type: disc;
}
ul ul {
  list-style-type: circle;
}
ul ul ul {
  list-style-type: square;
}

방법 2: Tailwind CSS 설정에 추가하기

tailwind.config.ts 파일을 수정하여 스타일을 지정할 수 있습니다:

import type { Config } from "tailwindcss";

const config: Config = {
  // 기존 설정...
  theme: {
    extend: {
      // 기존 확장...
    },
  },
  plugins: [
    function({ addBase }) {
      addBase({
        'ul': { listStyleType: 'disc' },
        'ul ul': { listStyleType: 'circle' },
        'ul ul ul': { listStyleType: 'square' },
      })
    }
  ],
};

export default config;

addBase 플러그인 함수를 사용하면 기본 스타일을 추가할 수 있습니다.

방법 3: 특정 클래스를 사용하기

특정 컴포넌트에만 적용하고 싶다면, 클래스를 만들어 사용할 수도 있습니다:

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  // 기존 설정...
  theme: {
    extend: {
      // 기존 확장...
    },
  },
  plugins: [],
};

export default config;

그리고 globals.css에 다음과 같이 추가:

/* globals.css */
@layer components {
  .nested-list ul {
    list-style-type: disc;
  }
  .nested-list ul ul {
    list-style-type: circle;
  }
  .nested-list ul ul ul {
    list-style-type: square;
  }
}

그런 다음 컴포넌트에서:

<div className="nested-list">
  <ul>
    <li>항목 1
      <ul>
        <li>하위 항목 1.1
          <ul>
            <li>하위 하위 항목 1.1.1</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

mozilla

참고하고 gpt 가 컨피그 바꾸는 방법 힌트 줘서

  plugins: [
    function ({ addComponents }: PluginAPI) {
      addComponents({
        ul: {
          'list-style-type': 'disc',
        },
        'ul ul': {
          'list-style-type': "'- '",
        },
      });
    },
  ],

이렇게 해결은 했는데요 맞는 방법일까요? 보통 현업에서는 어떻게 하나요?