notes

#tailwind

tailwind 👍2023. 6. 20.

panda-css를 시험삼아 함 써보던 중에 쓰면서는 인식하지 못하고 있던 tailwind의 장점을 알게 됐다.

tailwind로 작성되어 있던 코드를 바꿔봤는데: FzEqR1KaEAAxoFf 오른쪽의 형태가 되는 순간 어 이건 좀... 싶어지면서 아래의 두가지를 비로소 인식하게 되었다.

styled-components/emotion 처럼 css syntax를 쓰던지 stitches 처럼 js object syntax를 쓰던지 상관없이 스타일링 관련 코드는 무조건 세로 방향/2차원으로 코드 면적이 늘어나게 된다는 점.
key: value의 형태 때문에 반복하게 되는 타이핑량 + 시각적 스트레스가 있다는 점.

그러나 tailwind는:

코드가 가로/1차원으로만 늘어나고,
value만 줄줄이 넣는 식.

이라 1,2로 알게 모르게 느끼고 있던 스트레스가 해결되고 있었다는 걸 알게 되었고 결론은 tailwind가 선택지에 있으면 나는 tailwind를 쓸 것 같다는 뭐 그런 얘기.

추가:

이게 코드량/면적의 문제도 있지만 스타일링 관련 코드가 다른 코드랑 '생긴게' 아예 달라진다는 점.
스타일링 관련 코드가 className="..."에 '격리' 된다는 점.

을 또 들 수 있을 것 같다.

위에 나열한 요소들이 중요하게 느껴지는 건 아무래도 시각적으로 인지 부하가 줄어들기 때문인 것 같고.

css tailwind panda css

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

css	tailwind(modifier)
`:first-child`	`first:`
`:first-of-type`	`first-of-type:`
`:only-child`	`only:`
`:nth-child(odd)`	`odd:`
`:after`	`after:`

`group`, `peer`

추가로 지원하고 있는 기능이 있는데,

`group`

parent의 상태를 child가 쓸 수 있도록 함.

예)

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

`peer`

자신의 상태를 sibling이 쓸 수 있도록 함.

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

주의) peer-{modifier}는 peer의 prev 가 아니라 next sibling이 쓸 수 있음

Ref

Quick reference

css tailwind

TailwindCSS: You can not pass arbitrary values as variables2023. 5. 28.

const A = `after:content-['░']`

const B = `after:content-['${variable}']`

const A = `after:content-['░']`

const B = `after:content-['${variable}']`

A works, but B doesn't.

tailwind sad

notes

#tailwind

tailwind 👍2023. 6. 20.

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

group, peer

group

peer

Ref

TailwindCSS: You can not pass arbitrary values as variables2023. 5. 28.

Tags

`group`, `peer`

`group`

`peer`