๋”์ด๋…ธ๋ฒ ์ดํ„ฐ์Šค

๐ŸŽ‰ Tailwind UI โ†’ Tailwind Plus: ๋ฆฌ๋ธŒ๋žœ๋”ฉ ์†Œ์‹ ์ •๋ฆฌ

Tailwind UI๊ฐ€ Tailwind Plus๋กœ ๋ฆฌ๋ธŒ๋žœ๋”ฉ๋˜์—ˆ๋‹ค.

โœ… ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š” ์‚ฌํ•ญ

  • ํ•œ ๋ฒˆ ๊ตฌ๋งค, ํ‰์ƒ ์‚ฌ์šฉ ๊ตฌ๋… ๊ธฐ๋ฐ˜์ด ์•„๋‹Œ ๊ธฐ์กด๊ณผ ๋™์ผํ•˜๊ฒŒ ์ผํšŒ์„ฑ ๊ฒฐ์ œ๋กœ ์ œ๊ณต๋œ๋‹ค.
  • ์ถ”๊ฐ€ ๋น„์šฉ ์—†์Œ ๊ธฐ์กด Tailwind UI All-Access ๋ผ์ด์„ ์Šค๋Š” ์ž๋™์œผ๋กœ Tailwind Plus ๋ผ์ด์„ ์Šค๋กœ ์ „ํ™˜๋˜๋ฉฐ, ์‹ ๊ทœ ์‚ฌ์šฉ์ž ๊ฐ€๊ฒฉ๋„ ๋™์ผํ•˜๋‹ค.
  • ๊ธฐ์กด ์ฝ˜ํ…์ธ  ์œ ์ง€ ์ปดํฌ๋„ŒํŠธ, ํ…œํ”Œ๋ฆฟ, Catalyst UI ํ‚คํŠธ ๋“ฑ ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋Š” ๊ธฐ์กด๊ณผ ๋™์ผํ•˜๊ฒŒ ์ œ๊ณต๋œ๋‹ค.

๐Ÿ”„ ๋ณ€๊ฒฝ ์ด์œ 

Tailwind Plus๋Š” ๊ธฐ์กด Tailwind UI ๋ธŒ๋žœ๋“œ ๋ฒ”์œ„์— ๋‹ด๊ธฐ ์–ด๋ ค์› ๋˜ ๋‹ค์–‘ํ•œ ์‹คํ—˜๊ณผ ๊ธฐ๋Šฅ ํ™•์žฅ์„ ์œ„ํ•œ ์ƒˆ๋กœ์šด ์ด๋ฆ„์ด๋‹ค. ๋‹จ์ˆœํ•œ UI ํ‚คํŠธ ์ด์ƒ์˜ ๊ฒƒ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉํ–ฅ์„ฑ์„ ๋‹ด๊ณ  ์žˆ๋‹ค.


๐ŸŒŸ Tailwind Plus์—์„œ ์ƒˆ๋กญ๊ฒŒ ์‹œ๋„ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค

  • Tailwind Play ๊ณ„์ • ์‹œ์Šคํ…œ ์ฝ”๋“œ ์‹คํ—˜์„ ์ €์žฅํ•˜๊ณ , ๊ณผ๊ฑฐ ์ž‘์—…์„ ์ฐพ์•„๋ณด๋ฉฐ, ๊ธฐ์กด URL์„ ์œ ์ง€ํ•œ ์ฑ„ ์—…๋ฐ์ดํŠธ ๊ฐ€๋Šฅํ•˜๋„๋ก ์ง€์› ์˜ˆ์ •.
  • ์—๋””ํ„ฐ์šฉ ์ปค์Šคํ…€ ํ…Œ๋งˆ Tailwind ํŒ€์ด ์‚ฌ์šฉํ•˜๋Š” ์ปค์Šคํ…€ ๋ฌธ๋ฒ• ํ…Œ๋งˆ๋ฅผ ๊ณต๊ฐœํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์œผ๋กœ ํ™œ์šฉ ์˜ˆ์ •.
  • ์ปฌ๋Ÿฌ ํŒ”๋ ˆํŠธ Tailwind ๊ธฐ๋ณธ ์ƒ‰์ƒ ์™ธ์—, ๋””์ž์ด๋„ˆ๊ฐ€ ํ๋ ˆ์ด์…˜ํ•œ ์ƒˆ๋กœ์šด ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ๋ฅผ ์ œ๊ณต.
  • ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ํ…Œ๋งˆ Typography ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ์œ ์‚ฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ์˜ ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ ํ…Œ๋งˆ ์ œ๊ณต.
  • ์ „์šฉ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ตฌ์ถ• ์ˆ˜๋งŽ์€ ์‚ฌ์šฉ์ž๋กœ ์ธํ•ด ์ƒ๊ธฐ๋Š” ๊ณต๊ณต ์ฑ„๋„์˜ ๋…ธ์ด์ฆˆ๋ฅผ ์ค„์ด๊ณ , UI ์—”์ง€๋‹ˆ์–ด์™€ ์˜๋ฏธ ์žˆ๋Š” ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋Š” ์ „์šฉ ์ปค๋ฎค๋‹ˆํ‹ฐ ๊ตฌ์ถ• ์˜ˆ์ •.
  • ๋ฌธ์„œ ๋ฒ ํƒ€ ์ ‘๊ทผ ๊ถŒํ•œ ๋ฏธ์ถœ์‹œ ๊ธฐ๋Šฅ์˜ ๋ฌธ์„œ๋ฅผ ์ผ๋ฐ˜ ๊ณต๊ฐœ ์ด์ „์— ๋ฏธ๋ฆฌ ์—ด๋žŒ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ์ •์‹ ์ถœ์‹œ ์ „ ํ”ผ๋“œ๋ฐฑ ๊ธฐํšŒ ์ œ๊ณต.
  • ์˜คํ”„๋ผ์ธ ์ด๋ฒคํŠธ ์šฐ์„  ๋“ฑ๋ก Tailwind Connect ๋“ฑ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฐ‹์—… ํ–‰์‚ฌ์— ์กฐ๊ธฐ ๋“ฑ๋ก ๊ฐ€๋Šฅ.

์ผ๋ถ€ ๊ธฐ๋Šฅ์€ ๊ฐœ๋ฐœ์ด ์ง„ํ–‰ ์ค‘์ด๋ฉฐ, ์ผ๋ถ€๋Š” ์•„์ด๋””์–ด ๋‹จ๊ณ„์— ์žˆ์Œ. ๋ชจ๋“  ๊ธฐ๋Šฅ์ด ์ถœ์‹œ๋œ๋‹ค๋Š” ๋ณด์žฅ์€ ์—†์ง€๋งŒ ์‹คํ—˜์ ์œผ๋กœ ์ง€์†์ ์œผ๋กœ ํ™•์žฅ๋  ์˜ˆ์ •.


๐Ÿ“ฆ ๊ธฐ์กด ๋ฆฌ์†Œ์Šค ๊ฐ•ํ™”๋„ ๊ณ„์† ์ง„ํ–‰ ์ค‘

  • Catalyst๋ฅผ ์œ„ํ•œ ์ƒˆ๋กœ์šด Combobox ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ์˜ˆ์ •
  • React๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์ˆœ์ˆ˜ HTML ๊ธฐ๋ฐ˜ ํ…œํ”Œ๋ฆฟ๋„ ์ค€๋น„ ์ค‘

๐Ÿงฉ ์š”์•ฝ

Tailwind Plus๋Š” ๊ธฐ์กด Tailwind UI์˜ ๊ณ ํ’ˆ์งˆ ์ฝ˜ํ…์ธ ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋ฉด์„œ, ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๊ณผ ํ™•์žฅ ๊ฐ€๋Šฅ์„ฑ์„ ๋‹ด์€ ํ”Œ๋žซํผ์œผ๋กœ ์ „ํ™˜๋œ ๋ธŒ๋žœ๋“œ์ด๋‹ค.

๋ธŒ๋žœ๋“œ ๋ฆฌ๋ธŒ๋žœ๋”ฉ์€ ๋ณ€ํ™”์— ๋Œ€ํ•œ ๋„์ „์ด์ง€๋งŒ, ์•ž์œผ๋กœ์˜ ๋ฐฉํ–ฅ์„ฑ์„ ๊ณ ๋ คํ–ˆ์„ ๋•Œ ํ•„์—ฐ์ ์ธ ๊ฒฐ์ •์œผ๋กœ ํ‰๊ฐ€๋œ๋‹ค.

TI Tech Lab ์ด์ฃผ์„์—ฐ๊ตฌ์›

Source

Avatar

theinnovators

Add comment

์†Œ์…œ์ฑ„๋„

์นดํ…Œ๊ณ ๋ฆฌ

Facebook