8. Tailwind CSS 기본 설정과 옵션 - 2

설정 옵션

presets

presets 섹션을 사용하면 Tailwind의 기본 설정을 사용하는 대신 사용자 정의 기본 설정을 지정할 수 있습니다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],
  ...
}

prefix

prefix 옵션을 사용하면 Tailwind에서 생성된 모든 유틸리티 클래스에 맞춤 접두사를 추가할 수 있습니다. 이는 이름 충돌이 발생할 수 있는 기존 CSS 위에 Tailwind를 계층화할 때 유용할 수 있습니다.

※ 사용자 정의 클래스에는 접두사가 추가되지 않습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

예시

.tw-text-left {
  text-align: left;
}
.tw-text-center { 
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

접두사는 변형 수정자 뒤에 추가해 사용합니다.

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

important

important을 사용하면 Tailwind의 유틸리티를 !important 로 표시할지 여부를 제어할 수 있습니다. 이는 기존 CSS와 함께 Tailwind를 사용할 때 정말 유용할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}

separator

구분 기호 옵션을 사용하면 유틸리티 이름(text-center, items-end, etc.)에서 수정자(screen sizes, hover, focus, etc.)를 구분하는 데 사용해야 하는 문자를 사용자 정의할 수 있습니다. 기본적으로 콜론(:)이며 사용 특수 문자를 지원하지 않는 Pug와 같은 템플릿 언어를 사용하는 경우 변경하는 것이 유용할 수 있습니다.

corePlugins

corePlugins 섹션을 사용하면 프로젝트에 필요하지 않는 클래스를 완전히 비활성화할 수 있습니다.

// ❌ 테마 구성에 빈 개체를 할당
module.exports = {
  theme: {
    opacity: {},
  }
}

// ✔ corePlugins 구성에서 특정 플러그인을 비활성화
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

// ✔ 사용하려는 핵심 플러그인 목록 활성화
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

---

참고

https://tailwindcss.com/docs/configuration
https://tailwindcss.com/docs/presets
https://tailwindcss.com/docs/configuration#prefix
https://tailwindcss.com/docs/configuration#important
https://tailwindcss.com/docs/configuration#separator
https://tailwindcss.com/docs/configuration#core-plugins