๋ฐ˜์‘ํ˜•

Tailwind CSS๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋Ÿฐํƒ€์ž„์„ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋Š” ํด๋ž˜์Šค ์ด๋ฆ„์„ ๋นŒ๋“œ ํƒ€์ž„์— ์ถ”์ถœํ•˜์—ฌ ์ •์ ์ธ CSS ํŒŒ์ผ๋งŒ ๋ธŒ๋ผ์šฐ์ €๋กœ ์ „์†กํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €์—์„  Tailwind CSS ๊ด€๋ จ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋•Œ๋ฌธ์— Tailwind CSS๋Š” ๋Ÿฐํƒ€์ž„์— ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฐ’์— ์˜์กดํ•  ์ˆ˜ ์—†๋‹ค. ๋Ÿฐํƒ€์ž„์— ๋™์ ์œผ๋กœ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ Emotion ๊ฐ™์€ CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ์„ ํ™œ์šฉํ•ด์•ผ ํ•œ๋‹ค.

Tailwind doesnโ€™t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and canโ€™t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project. โ€” ์ฐธ๊ณ 

 

๋‹ค์ด๋‚˜๋ฏน ํด๋ž˜์Šค ์‚ฌ์šฉ ๋ฐฉ๋ฒ•


โถ ์™„์„ฑ๋œ ํด๋ž˜์Šค ์ด๋ฆ„ ์‚ฌ์šฉ

// โŒ Don't use string concatenation to create class names
<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>
// โœ… Do dynamically select a complete class name
<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

 

โท ๋‹ค์ด๋‚˜๋ฏน ํ˜น์€ ์‚ฌ์šฉ์ž ์ •์˜ CSS ๊ฐ’์€ ์ธ๋ผ์ธ ์Šคํƒ€์ผ ์‚ฌ์šฉ

// โŒ Arbitrary values cannot be computed from dynamic values
<div class="bg-[{{ userThemeColor }}]"></div>
// โœ… Use inline styles for truly dynamic or user-defined values
<div style="background-color: {{ userThemeColor }}"></div>

 

์ž˜๋ชป๋œ ์‚ฌ์šฉ ์˜ˆ์‹œ


Tailwind CSS ํด๋ž˜์Šค๋Š” ๋นŒ๋“œ ํƒ€์ž„์— ์ •์ ์œผ๋กœ ์ถ”์ถœ ๊ฐ€๋Šฅํ•œ ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•ด์•ผ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•œ๋‹ค. ์ฆ‰, ๋นŒ๋“œ ํƒ€์ž„์— mt-2.5 ์ฒ˜๋Ÿผ ์™„์„ฑ๋œ Tailwind CSS ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค. ์•„๋ž˜๊ฐ™์ด mt-${expression} ๋™์ ์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•œ๋‹ค.

function HelloWorld({
greeting = 'hello',
greeted = '"World"',
silent = false,
onMouseOver,
}) {
if (!greeting) {
return null;
}
// TODO: Don't use random in render
let num = Math.floor(Math.random() * 1e7)
.toString()
.replace(/\.\d+/gi, '');
return (
<div
className="HelloWorld"
title={`You are visitor number ${num}`}
onMouseOver={onMouseOver}
>
<strong>
{greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
</strong>
{greeting.endsWith(',') ? (
' '
) : (
<span style={{ color: 'grey' }}>", "</span>
)}
<em>{greeted}</em>
{silent ? '.' : '!'}
</div>
);
}
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€

๋Œ“๊ธ€์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.