설정 옵션
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
'Tailwind CSS' 카테고리의 다른 글
[JS] 코딩테스트 문제 : 섬나라 아일랜드 [BFS] (0) | 2024.05.17 |
---|---|
9. Tailwind CSS 주요 클래스 내용과 문법(layout) (0) | 2024.05.09 |
7. Tailwind CSS 기본 설정과 옵션 - 1 (0) | 2024.05.06 |
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 (0) | 2024.05.04 |
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일 (0) | 2024.04.30 |