tailwind 기본 설정
기본적으로 Tailwind는 프로젝트 루트에서 tailwind.config.js
파일에 내용을 참고해 사용자 정의된 내용을 적용합니다.
기본 설치
npx tailwindcss init
기본 설정 파일(tailwind.config.js) 구조
/* tailwind.config.js */
module.exports = {
content: [...],
theme: {
...
extend: {
...
},
},
plugins: [...],
}
ESM 설정 및 설치
기본적으로 설치 시 프로젝트가 ES 모듈인지 감지하여 올바른 구성 파일을 자동으로 생성합니다.
다만 --esm
플래그를 사용하여 ESM 구성 파일을 명시적으로 생성할 수도 있습니다.
npx tailwindcss init --esm
ESM 설정 파일(tailwind.config.js) 구조
/* tailwind.config.js */
/**
@type {import('tailwindcss').Config}
TypeScript에서 타입 선언을 하는 코드
*/
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
TypeScript 설정 및 설치
--ts
플래그를 사용하여 TypeScript 구성 파일을 생성할 수도 있습니다.
npx tailwindcss init --ts
설정 파일(tailwind.config.js) 구조
/* tailwind.config.ts */
import type { Config } from 'tailwindcss'
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
설정 옵션
Content
Tailwind 클래스 이름이 포함된 모든 HTML 템플릿, JS 구성 요소 및 기타 파일의 경로를 추가할 수 있습니다.
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
// ...
}
Theme
Theme
섹션에서는 color palette
, fonts
, type scale
, border sizes
, breakpoints
등 사이트의 시각적 디자인과 관련된 모든 것을 정의할 수 있습니다.
예시
module.exports = {
// ...
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
...
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
screens: {
'sm': '640px',
'md': '768px',
...
},
extend: {
spacing: {
'8xl': '96rem',
...
},
borderRadius: {
'4xl': '2rem',
...
}
}
}
}
기본 테마 재정의
theme
섹션 바로 아래에 내용을 정의하는 경우 기본 테마의 옵션을 재정의해 사용할 수 있습니다.
기본 테마 확장
theme.extend
키 아래에 내용을 정의하는 경우 기본값을 유지하면서도 새 값을 추가해 사용할 수 있습니다.
기본 테마 값 참조
기본 테마의 값을 참조하려면 tailwindcss/defaultTheme
에서 해당 값을 가져올 수 있습니다.
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
}
}
}
}
다른 테마 값 참조
theme
에서 다른 값을 참조해야 하는 경우 정적 값 대신 클로저를 활용 합니다. 클로저는 theme()
함수를 활용해 객체를 반환합니다.
※theme()
함수는 완전히 병합된 테마 객체에서 값을 찾으려고 시도하므로 기본 테마 값 뿐만 아니라 사용자 정의 항목도 참조할 수 있습니다.
/* tailwind.config.js */
module.exports = {
theme: {
spacing: {
// ...
},
backgroundSize: ({ theme }) => ({
auto: 'auto',
cover: 'cover',
contain: 'contain',
...theme('spacing') // spacing 의 객체 내용
})
}
}
클로저는 각 섹션 내부의 키가 아닌 최상위 테마 키에만 사용할 수 있습니다.
// ❌ theme 에 최상의 key 가 아닌 경우 클로저 사용 불가
module.exports = {
theme: {
fill: {
gray: ({ theme }) => theme('colors.gray')
}
}
}
// ✅ 최상위 key 에서 클로저 사용
module.exports = {
theme: {
fill: ({ theme }) => ({
gray: theme('colors.gray')
})
}
}
Plugins
플러그인을 사용하면 CSS 대신 JavaScript를 사용하여 Tailwind에 사용자의 스타일시트에 등록할 수 있습니다.
// Plugin 함수
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities, addComponents, e, config }) {
// Add your custom styles here
}),
...
]
}
공식 플러그인
기본 기능이 아니지만 인기 있는 기능들을 위한 공식 플러그인을 제공합니다.
module.exports = {
// ...
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('tailwindcss-children'),
],
}
1. Typography
@tailwindcss/typography
플러그인은 마크다운이나 CMS 데이터베이스와 같은 소스에서 가져온 콘텐츠 블록에 합리적인 타이포그래피 스타일을 사용할 수 있는 prose(산문 클래스) 세트를 추가합니다.
2. Forms
@tailwindcss/forms
플러그인은 유틸리티 클래스를 사용하 form 스타일을 더 쉽게 지정할 수 있는 독창적인 양식 재설정 레이어를 추가합니다.
3. Aspect ratio
@tailwindcss/aspect-ratio
플러그인은 오래된 브라우저에서 작동하는 네이티브 aspect-ratio
지원의 대안이며, 요소에 고정된 가로 세로 비율을 부여하기 위해 결합할 수 있는 aspect-w-*
및 aspect-h-*
클래스를 추가합니다.
예시
<div class="aspect-w-16 aspect-h-9">
<iframe src="..." ...></iframe>
</div>
4. Container queries
@tailwindcss/container-query
플러그인은 뷰포트 대신 @container
로 표시된 부모의 치수에 따라 요소를 스타일화할 수 있는 @sm
, @md
와 같은 새로운 @{size}
variants 을 추가했습니다.
<div class="@container">
<div class="@lg:text-sky-400">
<!-- ... -->
</div>
</div>
utilities 클래스 추가
addUtilities
및 matchUtilities
함수를 사용하면 Tailwind 의 utilities
레이어에 새 스타일을 등록할 수 있습니다
정적 유틸리티 등록
간단한 정적 유틸리티(Static utilities)를 등록하려면 addUtilities
함수를 사용하여 구현할 수 있습니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
...
})
})
]
}
동적 유틸리티 등록
matchUtilities
함수를 사용하여 사용자 테마 구성 설정에 정의된 값에 매핑되는 동적 유틸리티(Dynamic utilities)를 등록합니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
// 사용자 정의 테마 등록
tabSize: {
1: '1',
2: '2',
4: '4',
8: '8',
}
},
plugins: [
// plugin 함수에 두번째 인자로 테마 객체를 가져와 활용 할 수 있다.
plugin(function({ matchUtilities, theme }) {
// tab 이라는 유틸리티에 사용자 정의한 테마 tabSize 를 매핑하여 동적으로 사용할 수 있도록 설정
matchUtilities(
{
tab: (value) => ( { tabSize: value} ),
},
{ values: theme('tabSize') }
)
})
]
}
실제 사용 예시
// 등록된 동적 유틸리티 사용 예제
<div class="tab-2"> <!-- ... --> </div>
// 임의의 값 사용 가능
<div class="tab-[13]"> <!-- ... --> </div>
components 클래스 등록
플러그인에서 addComponents
를 호출하고 CSS-in-JS 구문을 사용하여 스타일을 전달하면 Tailwind의 components
레이어에 새 스타일을 등록할 수 있습니다.
Tailwind의 다른 components 클래스와 마찬가지로 플러그인으로 추가된 components클래스는 프로젝트에서 실제로 사용되는 경우에만 생성된 CSS에 포함됩니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents }) {
addComponents({
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
},
...
})
})
]
}
prefix 와 important 설정 관련
기본적으로 component
클래스는 사용자의 prefix
기본 설정을 따라가지만 사용자의 important
기본 설정에 영향을 받지 않습니다.
addComponents
를 활용해 plugin 에 스타일을 추가한 위 예제에 아래 설정을 추가
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: 'tw-',
important: true,
// ...
}
실제 예상되는 css 의 모습
.tw-btn {
padding: .5rem 1rem;
border-radius: .25rem;
font-weight: 600;
}
※ !important
를 활용하고싶다면 개별적으로 스타일 속성에 부여해야 합니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents }) {
addComponents({
'.btn': {
padding: '.5rem 1rem !important',
borderRadius: '.25rem !important',
fontWeight: '600 !important',
},
// ...
})
})
]
}
base 클래스 등록
플러그인에서 addBase
를 호출하고 CSS-in-JS 구문을 사용하여 스타일을 전달하면 Tailwind의 base
레이어에 새 스타일을 등록할 수 있습니다.
base
스타일은 div
또는 h1
과 같은 기본 선택기를 대상으로 하기 때문에 당연히 사용자의 prefix
또는 important
옵션을 따르지 않습니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, theme }) {
addBase({
'h1': { fontSize: theme('fontSize.2xl') },
'h2': { fontSize: theme('fontSize.xl') },
'h3': { fontSize: theme('fontSize.lg') },
})
})
]
}
variant 추가
addVariant
및 matchVariant
함수를 사용하면 hover
, focus
, support
와 같은 내장 variant 처럼 사용할 수 있는 사용자 정의 수정자를 등록할 수 있습니다.
정적 variant
간단한 정적인 변형(Static variants)를 등록하려면 addVariant
함수를 사용하여 구현할 수 있습니다.addVariant
함수의 첫 번째 인자는 사용자가 HTML에서 사용할 수정자 이름이며 두번째 인자는 실제 적용될 variants 들입니다.
const plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(function({ addVariant }) {
addVariant('optional', '&:optional')
addVariant('hocus', ['&:hover', '&:focus'])
addVariant('inverted-colors', '@media (inverted-colors: inverted)')
})
]
}
실제 적용 예시
<form class="flex inverted-colors:outline ...">
<input class="optional:border-gray-300 ..." />
<button class="bg-blue-500 hocus:bg-blue-600">...</button>
</form>
동적 variant
내장된 support-*
, data-*
, aria-*
과 같은 새로운 매개변수화된 동적인 변형(Dynamic variants) 를 등록하려면 matchVariant
함수를 사용하십시오.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ matchVariant }) {
matchVariant(
'nth',
(value) => {
return `&:nth-child(${value})`;
}, {
values: {
1: '1',
2: '2',
3: '3',
}
}
);
})
]
}
실제 적용 예시
<div class="nth-[3n+1]:bg-blue-500 ..."><!-- ... --></div>
참고
https://tailwindcss.com/docs/configuration
https://tailwindcss.com/docs/content-configuration
https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/plugins
'Tailwind CSS' 카테고리의 다른 글
9. Tailwind CSS 주요 클래스 내용과 문법(layout) (0) | 2024.05.09 |
---|---|
8. Tailwind CSS 기본 설정과 옵션 - 2 (0) | 2024.05.08 |
6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 (0) | 2024.05.04 |
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일 (0) | 2024.04.30 |
4. Tailwind CSS 반응형 디자인 (0) | 2024.04.29 |