PromleeBlog
sitemapaboutMe

posting thumbnail
여러 방식으로 tailwind 커스텀하기
Customizing tailwinds in multiple ways

📅
🚀

들어가기 전에🔗

이 포스트는 NextJs 15 에서 사용하는 tailwind 3.4.1 기준으로 작성되었습니다.
이번에는 tailwindcss를 사용하면서 커스텀 스타일을 추가하는 방법에 대해 알아보겠습니다.
단순히 css 파일을 이용해서 추가하는 방법도 있지만, tailwindcss의 config 파일을 이용해 커스텀 스타일을 추가하는 방법도 있습니다.

또한, 하나의 클래스로
여러 css를 한번에 추가
하고 싶을 때 플러그인을 사용하여 커스텀 css 세트를 지정할 수 있습니다.
이는 커스텀
타이포그래피
를 추가하거나, 버튼 스타일을 추가할 때 유용합니다.

global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
🚀

tailwind.config.js 파일 사용하기🔗

👨‍💻
config 파일을 사용하면 기존 테마를 수정, 확장할수 있다는 장점이 있습니다.
✅

screens 속성🔗

아래 예제는 기존 정의되어있던 sm, md, lg, xl 사이즈 속성을 변경합니다.
tailwind.config.ts
module.exports = {
	theme: {
		screens: {
			sm: '640px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
		}
	}
}
page.tsx
...
<div class="bg-blue-500 sm:bg-red-500 md:bg-green-500 lg:bg-yellow-500 xl:bg-purple-500">
	Responsive Design
</div>
...
✅

colors 속성🔗

아래 예제는 기존 정의되어있던 색상을 변경하고 추가합니다.
tailwind.config.ts
module.exports = {
	theme: {
		colors: {
			custom-blue: '#0000ff',
			custom-red: '#ff0000',
			gray: {
				100: '#f7fafc',
			},
		}
	}
}
page.tsx
...
<div class="bg-custom-blue">
	Custom Blue
</div>
<div class="bg-custom-red">
	Custom Red
</div>
<div class="bg-gray-100">
	Custom Gray 100
</div>
...
✅

extend 속성🔗

아래 예제는 기존 정의되어있던 여러 속성을 수정, 확장합니다.
폰트 설정은 아래에서 더 자세히 다루겠습니다.
tailwind.config.ts
module.exports = {
	theme: {
		extend: {
			fontFamily: {
				custom: ['Noto Sans KR', 'sans-serif'],
			},
			fontSize: {
				'7xl': '5rem',
			},
			spacing: {
				'72': '18rem',
			},
			borderRadius: {
				DEFAULT: '0.25rem',
				xl: '1rem',
			},
		}
	}
}
page.tsx
...
<div class="font-custom text-7xl">
	Custom Font Size
</div>
<div class="p-72">
	Custom Spacing
</div>
<div class="rounded">
	Custom Default Border Radius
</div>
<div class="rounded-xl">
	Custom XL Border Radius
</div>
...
✅

container 속성🔗

아래 예제는 기존 정의되어있던 container 속성을 변경합니다.
tailwind.config.ts
module.exports = {
	theme: {
		container: {
			center: true,
			padding: '2rem',
		}
	}
}
page.tsx
...
<div class="container mx-auto">
	Container
</div>
...
✅

spacing 속성🔗

아래 예제는 기존 정의되어있던 크기 속성을 수정, 확장합니다.
tailwind.config.ts
module.exports = {
	theme: {
		spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem'
		}
	}
}
page.tsx
...
<div class="p-px">
	1px
</div>
<div class="p-0">
	0
</div>
<div class="p-0.5">
	0.5
</div>
...
🚀

플러그인을 사용하여 css 세트 정의🔗

플러그인을 사용하여 커스텀 css 세트를 지정할 수 있습니다.
tailwind.config.ts
import plugin from "tailwindcss/plugin";
 
module.exports = {
	plugins: [
		function ({ addComponents }) {
			addComponents({
				'.btn': {
					padding: '.5rem 1rem',
					borderRadius: '.25rem',
					fontWeight: '600',
				}
			})
		}
	]
}
page.tsx
...
<div class="btn bg-blue-500 text-white">
	Button
</div>
...
타이포그래피를 추가할 때도 유용하게 사용할 수 있습니다.
tailwind.config.ts
import plugin from "tailwindcss/plugin";
 
module.exports = {
	plugins: [
		function ({ addComponents }) {
			addComponents({
        ".headline-0": {
          fontFamily: '"Pretendard"',
          fontSize: "48px",
          fontWeight: "500",
          lineHeight: "normal",
          letterSpacing: "-0.48px",
        },
			})
		}
	]
}
page.tsx
...
<div class="headline-0">
	Headline 0
</div>
...
🚀

global.css 파일 사용하기🔗

tailwind 기본 설정 파일에서 시작
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
✅

커스텀 클래스 스타일 추가🔗

global.css 파일에 커스텀 클래스 스타일을 추가할 수 있습니다.
css 기반으로 정의하기 쉽다는 장점이 있지만, tailwindcss snippet 스타일 자동완성을 사용할 수 없다는 단점이 있습니다.
global.css
.btn {
	padding: .5rem 1rem;
	border-radius: .25rem;
	font-weight: 600;
}
page.tsx
...
<div class="btn bg-blue-500 text-white">
	Button
</div>
...
✅

config 파일과 global.css 파일 연동🔗

config 파일과 global.css 파일을 연동하여 사용할 수 있습니다.
global.css
@layer base {
  :root {
    --background: #f8f8f8;
    --foreground: #171717;
  }
}
tailwind.config.ts
module.exports = {
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
				background: 'var(--background)',
				foreground: 'var(--foreground)',
			}
		}
	}
}
page.tsx
...
<div class="bg-background text-foreground">
	Background & Foreground
</div>
...
🚀

커스텀 폰트 추가🔗

✅

폰트 파일 추가🔗

폰트 파일을 다운받아 public 폴더에 추가합니다.
ex) Pretendard 다운 링크: Pretendard↗
public/
	fonts/
		Pretendard-Thin.ttf
		Pretendard-ExtraLight.ttf
		Pretendard-Light.ttf
		Pretendard-Regular.ttf
		Pretendard-Medium.ttf
		Pretendard-SemiBold.ttf
		Pretendard-Bold.ttf
		Pretendard-ExtraBold.ttf
		Pretendard-Black.ttf
✅

css 파일 추가🔗

/src/util/font.css
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Thin.ttf") format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-ExtraLight.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard-Black.ttf") format("truetype");
  font-weight: 900;
}
✅

config 파일에 폰트 추가🔗

tailwind.config.ts
module.exports = {
	theme: {
		extend: {
			fontFamily: {
				pretendard: ["Pretendard"],
			}
		}
	}
}
✅

layout 파일에 css 파일 import🔗

/src/app/layout.tsx
import '../util/font.css';
...
✅

폰트 사용🔗

/src/app/page.tsx
...
<div class="font-pretendard text-7xl">
	Pretendard Font
</div>
...
🚀

문제 발생 및 해결🔗

🙅
🚀

결론🔗

tailwindcss의 config 파일을 사용하여 커스텀 스타일을 추가하는 방법에 대해 알아보았습니다.
또한, 플러그인을 사용하여 커스텀 css 세트를 지정하는 방법에 대해 알아보았습니다.
마지막으로, global.css 파일을 사용하여 커스텀 클래스 스타일을 추가하는 방법에 대해 알아보았습니다.
✅

더 생각해 보기🔗

color을 hex 코드가 아닌 다른 방식으로 사용할 수 있는 방법은 무엇이 있을까요?
➡️

rgb/rgba 사용하기🔗

global.css
@layer base {
	:root {
    --background: 255, 255, 255;
    --foreground: 240, 240, 240;
	}
}
tailwind.config.ts
module.exports = {
	theme: {
		extend: {
			colors: {
        background: "rgba(var(--background) , <alpha-value>)",
        foreground: "rgba(var(--foreground) , <alpha-value>)",
			}
		}
	}
}
➡️

hsl/hsla 사용하기🔗

global.css
@layer base {
	:root {
		--background: 0, 0%, 100%;
		--foreground: 0, 0%, 94%;
	}
}
tailwind.config.ts
module.exports = {
	theme: {
		extend: {
			colors: {
				background: "hsla(var(--background) , <alpha-value>)",
				foreground: "hsla(var(--foreground) , <alpha-value>)",
			}
		}
	}
}
✅

참고🔗

Tailwind CSS - adding custom styles↗
🚀 들어가기 전에
🚀 tailwind.config.js 파일 사용하기
✅ screens 속성
✅ colors 속성
✅ extend 속성
✅ container 속성
✅ spacing 속성
🚀 플러그인을 사용하여 css 세트 정의
🚀 global.css 파일 사용하기
✅ 커스텀 클래스 스타일 추가
✅ config 파일과 global.css 파일 연동
🚀 커스텀 폰트 추가
✅ 폰트 파일 추가
✅ css 파일 추가
✅ config 파일에 폰트 추가
✅ layout 파일에 css 파일 import
✅ 폰트 사용
🚀 문제 발생 및 해결
🚀 결론
✅ 더 생각해 보기
✅ 참고