tailwindcss 정리

Modifiers for Lists

<ul>
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="flex justify-between my-2 odd:bg-blue-50 even:bg-yellow-50 first:bg-teal-50 last:bg-amber-50"
            >
              <span className="text-gray-500">Grey Chair</span>
              <span className="font-semibold">$19</span>
            </div>
          ))}
        </ul>
        <ul>
          {["a", "b", "c", ""].map((c, i) => (
            <li className="bg-red-500 py-2 empty:hidden" key={i}>
              {c}
            </li>
          ))}
        </ul>

1) odd: , even: , first: last:
2) empty:hidden => 빈값일 때 display:none 처리

Modifiers for Forms

group

그룹이 될 태그의 클래스에 group 추가후
그룹내의 태그의 클래스에 group-focus: 추가

peer

input 태그의 클래스에 peer 추가후
에러 메세지인 span 태그의 클래스에 peer-invalid: 추가

그밖에 property들

focus-within:
required:
invalid:
placeholder shown:
disabled:
open: // details, summary 태그일 때
list-decimal, marker: // li 태그일 때
file: // input type="file" 일 때
first-line: first-letter:

Responsive Modifiers

sm: md: lg: xl: 2xl:

landscape: portrait:

col-span-1, col-span-2

 <div className="bg-slate-400 xl:place-content-center py-20 px-20 grid gap-10 lg:grid-cols-2 xl:grid-cols-3 min-h-screen">
      <div className="bg-white  flex flex-col justify-between p-6 rounded-3xl shadow-xl">

Dark Mode

dark:

tailwind.config.js

darkMode: "media" // 자동으로 다크모드 설정
darkMode: "class" // 수동으로 다크모드 설정(.dark 추가 필요, 보통 body나 상위 태그에 추가함)

ETC

텍스트

text-[#000]
text-[16px]

백그라운드 이미지

bg-[url()]