TIL-60 Tailwind CSS๐ŸŒฌ๏ธ

ssxst31ยท2021๋…„ 12์›” 8์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
5/5
post-thumbnail

1 .Tailwind CSS๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

Tailwind CSS๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ CSS ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.
์ธ๋ผ์ธ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์ฒ˜๋Ÿผ ๋น ๋ฅด๊ณ  ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค.
styled-components ๋“ฑ๊ณผ ๊ฐ™์ด ๊ณ„์† ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€๊ณผ ๋„ค์ด๋ฐ์˜ ์–ด๋ ค์›€,๊ณ„์† ์ฐพ์•„๋‹ค๋…€์•ผ ํ•˜๋Š” ์‹œ๊ฐ„๋„ ๋งŽ์•˜๋Š”๋ฐ Tailwind CSS๋Š” ๊ทธ๋ ‡์ง€ ์•Š๋‹ค.

2 . ์„ค์น˜

TailwindCSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ <a herf=""https://tailwindcss.com/>๊ณต์‹๋ฌธ์„œ์— ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด ์žˆ์œผ๋‹ˆ ๊ณต์‹๋ฌธ์„œ๋กœ ๊ฐ€์„œ ์ž์‹ ์ด ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ์„ค์น˜ ๊ฐ€์ด๋“œ๋ฅผ ๋ณด๊ณ  ์„ค์น˜ํ•˜๋ฉด ์‰ฝ๊ฒŒ ํ”„๋กœ์ ํŠธ์— Tailwind CSS๋ฅผ ์ ์šฉ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

3 . ์‚ฌ์šฉ๋ฒ•

Tailwind CSS๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๋‹ค. html ํƒœ๊ทธ์— class ํ˜น์€ react ๋ผ๋ฉด className์ด๋ผ๊ณ  ์ ๊ณ  ์—ฌ๊ธฐ์— ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ CSS ์†์„ฑ์„ ์ ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

profile
์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์„ ๊ฐœ๋ฐœํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€