Tailwind CSS
- 유틸리티 기반의 CSS 프레임워크
- CSS를 직접 작성하지 않고도, 유틸리티 클래스를 사용하여 사용자 정의 디자인을 구축할 수 있음
<body class="bg-gray-100 flex items-center justify-center h-screen">
가상 클래스
- https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference
# 해당 요소의 상태에 따라 클래스 적용하기
- hover, focus, active
<!-- hover 상태일 때 bg-sky-700 클래스 적용 -->
<button class="bg-sky-500 hover:bg-sky-700 ...">
Save changes
</button># 해당 요소의 자식요소에 클래스 적용하기
- first, last, odd, even, only-child, first-of-type, ...
<!-- 해당 요소의 첫 번째 자식요소에 pt-0 클래스를, 마지막 자식 요소에 pb-0 클래스를 적용 -->
<li class="flex py-4 first:pt-0 last:pb-0">
...
</li>
<!-- 해당 요소의 홀수 번째 자식요소에 bg-white 클래스를, 짝수 번째 자식요소에 bg-slate-50 클래스를 적용 -->
<tr class="odd:bg-white even:bg-slate-50">
...
</tr># 폼 상태 속성에 따라 클래스 적용하기
- required, invalid, disabled, read-only, checked, indeterminate, ...
# 부모 요소의 상태에 따라 자식 요소에 클래스 적용하기
- 부모 요소에 'group'
- 클래스를 적용할 요소에 'group-*:{대상클래스}'
ex) group-focus:{대상클래스}, group-hover:{대상클래스}, ...
→ 부모 요소가 * 상태가 될 때 자식 요소에 클래스를 적용함
<!-- a 요소가 hover 상태가 되면 p 요소에 text-white 클래스가 적용됨 -->
<a href="#" class="group">
...
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a># 부모 요소에 그룹명을 지정해서 특정 부모 요소의 상태에 따라 클래스 적용하기
- 부모 요소에 'group/{그룹명}'
- 클래스를 적용할 요소에 'group-*/{그룹명}:{대상클래스}'
<ul role="list">
<li class="group/item hover:bg-slate-100 ...">
...
<!-- a 요소는 기본적으로는 invisible이고, group/item 클래스를 가진 요소가 hover되면 visible -->
<a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">
<!-- group/edit 클래스를 가진 요소가 hover되면 클래스 적용 -->
<span class="group-hover/edit:text-gray-700 ...">Call</span>
</a>
</li>
</ul># 형제 요소의 상태에 따라 클래스 적용하기
- 형제 요소에 'peer'
- 클래스를 적용할 요소에 'peer-*'
※ 반드시 클래스를 적용할 요소가 형제 요소보다 뒤에 있어야만 작동함
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Email</span>
<input type="email" class="peer ..."/>
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
Please provide a valid email address.
</p>
</label>
</form># 형제 요소에 이름을 지정해서 특정 형제 요소의 상태에 따라 클래스 적용하기
- 형제 요소에 'peer/{이름}'
- 클래스를 적용할 요소에 'peer-*/{이름}:{대상클래스}'
# 하위 요소의 상태에 따라 클래스 적용하기
- 클래스를 적용할 요소에 'has-*:{대상클래스}'
<!-- 자식 요소가 checked 상태가 되면 bg-indigo 클래스 적용 -->
<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ..">
<svg fill="currentColor">
<!-- ... -->
</svg>
Google Pay
<input type="radio" class="checked:border-indigo-500 ..." />
</label>
# 부모 요소의 자손을 기준으로 클래스 적용하기
- 부모 요소에 'group'
- 클래스를 적용할 요소에 'group-has-*:{대상클래스}'
# 형제 요소의 자손을 기준으로 클래스 적용하기
- 형제 요소에 'peer'
- 클래스를 적용할 요소에 'peer-has-*:{대상클래스}'
가상 요소
# placeholder 텍스트에 클래스 적용하기
- placeholder
<input class="placeholder:italic placeholder:text-slate-400" placeholder="Search for anything..." type="text" name="search"/>
# <input type="file">의 파일 선택 버튼에 클래스 적용하기
- file
<input type="file" class="file:mr-4 file:py-2 file:px-4"># 글머리표에 클래스 적용하기
- marker
- li 요소에 직접 사용하거나, 부모 요소인 ul에 사용해서 전체 li 요소에 적용할 수 있음
<ul role="list" class="marker:text-sky-400">
<li>5 cups chopped Porcini mushrooms</li>
<li>1/2 cup of olive oil</li>
<li>3lb of celery</li>
</ul>
# 드래그한 텍스트에 클래스 적용하기
- selection
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>
So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers
a strange calm came over me. I don't know if it was divine intervention
or the kinship of all living things but I tell you Jerry at that moment,
I <em>was</em> a marine biologist.
</p>
</div>
# 콘텐츠 블록의 첫 번째 줄에 클래스 적용하기
- first-line
# 콘텐츠 블록의 첫 번째 글자에 클래스 적용하기
- first-letter
'Tailwind CSS' 카테고리의 다른 글
| [TailwindCSS] 자주 쓰이는 유틸리티 클래스 모음 (2) | 2024.11.04 |
|---|---|
| [TailwindCSS] 반응형 디자인 (2) | 2024.11.03 |
| [TailwindCSS] 사용자 정의 스타일 (0) | 2024.11.02 |