μ νΈλ¦¬ν° κΈ°λ° CSS νλ μμν¬
Tailwind
μ νΈλ¦¬ν° κΈ°λ°μ CSS νλ μμν¬
β’
Tailwind vs Boostrap
β’
μ¬μ© λ°©λ²
β’
κΈ°λ³Έ μ¬μ©
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 λ°μν