notes

tailwind πŸ‘2023. 6. 20.

panda-cssλ₯Ό μ‹œν—˜μ‚Όμ•„ 함 써보던 쀑에 μ“°λ©΄μ„œλŠ” μΈμ‹ν•˜μ§€ λͺ»ν•˜κ³  있던 tailwind의 μž₯점을 μ•Œκ²Œ 됐닀.

tailwind둜 μž‘μ„±λ˜μ–΄ 있던 μ½”λ“œλ₯Ό λ°”κΏ”λ΄€λŠ”λ°: FzEqR1KaEAAxoFf 였λ₯Έμͺ½μ˜ ν˜•νƒœκ°€ λ˜λŠ” μˆœκ°„ μ–΄ 이건 μ’€... μ‹Άμ–΄μ§€λ©΄μ„œ μ•„λž˜μ˜ 두가지λ₯Ό λΉ„λ‘œμ†Œ μΈμ‹ν•˜κ²Œ λ˜μ—ˆλ‹€.

  1. styled-components/emotion 처럼 css syntaxλ₯Ό μ“°λ˜μ§€ stitches 처럼 js object syntaxλ₯Ό μ“°λ˜μ§€ 상관없이 μŠ€νƒ€μΌλ§ κ΄€λ ¨ μ½”λ“œλŠ” 무쑰건 μ„Έλ‘œ λ°©ν–₯/2μ°¨μ›μœΌλ‘œ μ½”λ“œ 면적이 λŠ˜μ–΄λ‚˜κ²Œ λœλ‹€λŠ” 점.
  2. key: value의 ν˜•νƒœ λ•Œλ¬Έμ— λ°˜λ³΅ν•˜κ²Œ λ˜λŠ” νƒ€μ΄ν•‘λŸ‰ + μ‹œκ°μ  μŠ€νŠΈλ ˆμŠ€κ°€ μžˆλ‹€λŠ” 점.

κ·ΈλŸ¬λ‚˜ tailwindλŠ”:

  1. μ½”λ“œκ°€ κ°€λ‘œ/1μ°¨μ›μœΌλ‘œλ§Œ λŠ˜μ–΄λ‚˜κ³ ,
  2. value만 쀄쀄이 λ„£λŠ” 식.

이라 1,2둜 μ•Œκ²Œ λͺ¨λ₯΄κ²Œ 느끼고 있던 μŠ€νŠΈλ ˆμŠ€κ°€ ν•΄κ²°λ˜κ³  μžˆμ—ˆλ‹€λŠ” κ±Έ μ•Œκ²Œ λ˜μ—ˆκ³  결둠은 tailwindκ°€ 선택지에 있으면 λ‚˜λŠ” tailwindλ₯Ό μ“Έ 것 κ°™λ‹€λŠ” 뭐 그런 μ–˜κΈ°.


μΆ”κ°€:

  1. 이게 μ½”λ“œλŸ‰/면적의 λ¬Έμ œλ„ μžˆμ§€λ§Œ μŠ€νƒ€μΌλ§ κ΄€λ ¨ μ½”λ“œκ°€ λ‹€λ₯Έ μ½”λ“œλž‘ 'μƒκΈ΄κ²Œ' μ•„μ˜ˆ λ‹¬λΌμ§„λ‹€λŠ” 점.
  2. μŠ€νƒ€μΌλ§ κ΄€λ ¨ μ½”λ“œκ°€ className="..."에 '격리' λœλ‹€λŠ” 점.

을 또 λ“€ 수 μžˆμ„ 것 κ°™λ‹€.

μœ„μ— λ‚˜μ—΄ν•œ μš”μ†Œλ“€μ΄ μ€‘μš”ν•˜κ²Œ λŠκ»΄μ§€λŠ” 건 μ•„λ¬΄λž˜λ„ μ‹œκ°μ μœΌλ‘œ 인지 λΆ€ν•˜κ°€ 쀄어듀기 λ•Œλ¬ΈμΈ 것 κ°™κ³ .

Tags