Best practices for adding your own custom styles to Tailwind.
color palette, spacing scale, typography scale, breakpoints 등을 변경하고 싶다면, tailwind.config.js 파일의 theme 섹션에 customization을 추가하면 된다. 아래처럼 말이다.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
sm breakpoint의 default size는 640px 부터인데, 480px로 덮어쓰고 있는 모습이다.Learn more about customizing your theme in the Theme configuration documentation.
대부분의 스타일링 작업은 테일윈드가 제공하는 constrained set of design tokens로 쳐낼 수 있겠지만, 가끔씩 pixel-perfect한 작업을 위해 그런 제약constraint들을 벗어날 필요가 있을 수 있다.
예를들어 background image를 딱 정확한 위치에 위치시키기 위해서 ‘top: 117px’ 같은게 꼭 필요한 상황에서는, Tailwind의 square bracket notation([])을 사용하여 그때그때(on the fly) arbitrary value를 가진 클래스를 생성할 수 있다:
<div class="top-[117px]">
<!-- ... -->
</div>
이런 방식은 inline styles와 비슷하지만, Tailwind 에서는 여기에 더해 ‘hover’나 ‘lg’같은 modifier와 함께 조합하여 사용할 수 있다는 이점이 있다.
<div class="top-[117px] lg:top-[344px]">
<!-- ... -->
</div>
프레임워크가 제공하는 모든 기능들(background colors, font sizes, pseudo-element content 등 포함)에 이런 arbitrary value를 적용할 수 있다.
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
<!-- ... -->
</div>
심지어는 theme function을 사용하여 tailwind.config.js 파일 안에 있는 design token을 참조할 수도 있다.
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
<!-- ... -->
</div>
참고: https://tailwindcss.com/docs/functions-and-directives#theme (노트정리: Functions & Directives)
만약 CSS variable을 arbitrary value로 사용하는 경우, var(…)로 감쌀 필요 없이 그대로 사용하면 된다고 한다:
<div class="bg-[--my-color]">
<!-- ... -->
</div>
If you ever need to use a CSS property that Tailwind doesn’t include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:
<div class="[mask-type:luminance]"><!-- ... -->
</div>
[]로 감싸서 사용하면 된다는 것.This is really like inline styles, but again with the benefit that you can use modifiers:
<div class="[mask-type:luminance] hover:[mask-type:alpha]"><!-- ... -->
</div>
This can be useful for things like CSS variables as well, especially when they need to change under different conditions:
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"><!-- ... -->
</div>