Search
Duplicate

Tailwind

์œ ํ‹ธ๋ฆฌํ‹ฐ ๊ธฐ๋ฐ˜ CSS ํ”„๋ ˆ์ž„์›Œํฌ
Basic

Tailwind

์œ ํ‹ธ๋ฆฌํ‹ฐ ๊ธฐ๋ฐ˜์˜ CSS ํ”„๋ ˆ์ž„์›Œํฌ
โ€ข
Tailwind vs Boostrap
โ€ข
์‚ฌ์šฉ ๋ฐฉ๋ฒ•
1.
CDN ๋ฐฉ์‹
2.
Node.js CLI ๋ฐฉ์‹
3.
React ์„ธํŒ…
โ€ข
๊ธฐ๋ณธ ์‚ฌ์šฉ
โ—ฆ
๋ฉ”์ธ ํ™”๋ฉด
โ—ฆ
๋กœ๊ทธ์ธ ํ™”๋ฉด
Tailwind

Tailwind - Margin & Padding

Margin & Padding

Tailwind - Margin & Padding

Tailwind - Border

โ€ข
border
โ€ข
๊ธฐ๋ณธ๊ฐ’
โ€ข
ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜
โ€ข
ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ
โ€ข
ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ
โ€ข
ํ…Œ๋‘๋ฆฌ ๋ฐฉํ–ฅ
Tailwind - Border

Tailwind - flex

flex ๋Š” Container ์— item ์„ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•˜์—ฌ ์œ ์—ฐํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์ ์šฉ์‹œํ‚ค๋Š” ๋ ˆ์ด์•„์›ƒ์ž…๋‹ˆ๋‹ค.
โ€ข
์ปจํ…Œ์ด๋„ˆ : ๋ฐฐ์น˜ํ•  UI ์š”์†Œ๋ฅผ ๋‹ด๋Š” ๋ฐ•์Šค
โ€ข
์•„์ดํ…œ : ๋ฐฐ์น˜ ๋ฐ ์ •๋ ฌํ•  ์š”์†Œ
Tailwind - flex

Tailwind - Button ๋ฒ„ํŠผ

tailwind ๋กœ Button UI ๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.
โ€ข
๊ธฐ๋ณธ ๋ฒ„ํŠผ
โ€ข
ํ…Œ๋‘๋ฆฌ ๋ฒ„ํŠผ
โ€ข
๋ฒ„ํŠผ ์‚ฌ์ด์ฆˆ
โ€ข
๋ธ”๋ก ๋ฒ„ํŠผ
Tailwind - Button ๋ฒ„ํŠผ

Tailwind - Switch ์Šค์œ„์น˜

tailwind ๋กœ Switch UI ๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.
Tailwind - Switch ์Šค์œ„์น˜

Tailwind - Card

tailwind ๋กœ Card UI ๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.
โ€ข
์นด๋“œ๋ทฐ
โ€ข
๊ธฐ๋ณธ ์นด๋“œ
โ€ข
์ด๋ฏธ์ง€ ์นด๋“œ
Tailwind - Card

Tailwind - Table ํ…Œ์ด๋ธ”

tailwind ๋กœ Table ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
Tailwind - Table ํ…Œ์ด๋ธ”

Tailwind - Form ์ž…๋ ฅํผ

tailwind ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ž…๋ ฅํผ UI ๋ฅผ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.
Tailwind - Form ์ž…๋ ฅํผ
Tailwind - Sign in ๋กœ๊ทธ์ธ

Tailwind - hover

hover:์Šคํƒ€์ผํด๋ž˜์Šค ์‚ฌ์šฉํ•˜๋ฉด, hover(๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฐ) ์ƒํƒœ์ผ ๋•Œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ผ๋ฐ˜์ ์ธ CSS ์—์„œ๋Š” :hover ๊ฐ€์ƒ ์„ ํƒ์ž๋กœ ์Šคํƒ€์ผ ์†์„ฑ์„ ์ง€์ •ํ•˜์—ฌ hover ์ƒํƒœ์ผ ๋•Œ ์Šคํƒ€์ผ๋ง์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
tailwind ์—์„œ๋Š” hover:์Šคํƒ€์ผํด๋ž˜์Šค ํ˜•ํƒœ๋กœ hover ์ƒํƒœ์ผ ๋•Œ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Tailwind - hover
Tailwind - focus
Tailwind - Responsive ๋ฐ˜์‘ํ˜•