내가 다시 보려고 정리하는 tailwind css
설치방법
npm install -D tailwindcss postcss autoprefixertailwind.config.js 파일생성
npx tailwindcss init -p (-p를 붙이면 postcss.config.js파일까지 생성)Prettier를 통한 TailwindCSS 클래스 자동 정렬 플러그인
클래스가 순서에 맞게 자동으로 정렬되도록 도와줌
npm install -D prettier prettier-plugin-tailwindcssTailwindCSS Modifier 리스트
기본적으로 Tailwind에 포함된 모든 단일 modifier들입니다.
(~일 때 실행하는 것들)
Modifier(왼쪽), 기존CSS(오른쪽)
hover (&:hover)
focus (&:focus)
active (&:active)
first (&:first-child)
disabled (&:disabled)
sm (@media (min-width: 640px))
md ( @media (min-width: 768px))
lg (@media (min-width: 1024px))
dark (@media (prefers-color-scheme: dark))
사용법 예시
hover: bg-orange-100 Ring
Ring Width
상자 그림자가 있는 윤곽선을 만들기 위한 유틸리티입니다.
ring-{width} 유틸리티를 사용하여 특정 두께의 solid box-shadow를 요소에 적용합니다. 링은 기본적으로 반투명한 파란색으로 많은 시스템의 기본 포커스 링 스타일과 유사합니다.
ex) ring-2 ring-offset-2 focus:ring-2 ring-red-500
<button class="ring-2 ring-offset-2 focus:ring-2" />
<div class="ring-2 hover:ring-4 md:ring-4" />https://tailwindcss.com/docs/ring-width
Ring Color
외곽선 링의 색상을 설정하는 유틸리티입니다.
ring-{color} 유틸리티를 사용하여 외곽선 링의 색상을 설정합니다.
<button class="... ring-2 ring-blue-500" />:empty
empty modifier를 사용하여 콘텐츠가 없는 경우 스타일을 지정합니다.
콘텐츠가 없는 경우=>빈 텍스트, undefined, null등과 같이 값이 없는 경우에 해당
- empty:hidden은 display: none과 같다.
{[1, 2, ""].map((number) => (
< h3 className="bg-red-500 empty:hidden" key={number}>
{number}
< /h3>
))}https://tailwindcss.com/docs/hover-focus-and-other-states#empty
짝수=> even:bg-blue-200
홀수=> odd:bg-red-200
group
상위(부모) 상태를 기반으로 한 스타일 지정
일부 부모 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 부모를 group 클래스로 표시하고 group-hover와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다.
이 패턴은 group-focus, group-active 또는 group-odd와 같은 모든 유사 클래스 수정자와 함께 작동합니다.
< a href="#" class="group">
< h3 class="group-hover:text-white">New project< /h3>
< /a>https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
peer
형제 상태를 기반으로 한 스타일 지정
형제 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 형제를 peer 클래스로 표시하고 peer-invalid와 같은 peer-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다. 이 패턴은 모든 유사 클래스 수정자(예: peer-focus, peer-required 및 peer-disabled)와 함께 작동합니다.
< input class="peer"/ >
< p class="peer-invalid:visible"> Pizza< /p>Mobile First
기본적으로 Tailwind는 Bootstrap과 같은 다른 프레임워크에서 사용하는 것과 유사한 모바일 우선 breakpoint 시스템을 사용합니다. 이것이 의미하는 바는 접두사가 붙지 않은 유틸리티(예: uppercase)는 모든 화면 크기에 적용되는 반면 접두사가 붙은 유틸리티(예: md:uppercase)는 지정된 breakpoint 이상에서만 적용됩니다.
이 접근 방식이 사람들을 가장 자주 놀라게 하는 부분은 모바일용으로 스타일을 지정하려면 sm: 접두사가 붙은 버전이 아니라 접두사가 없는 버전의 유틸리티를 사용해야 한다는 것입니다. sm을 "작은 화면에서"를 의미하는 것으로 생각하지 마십시오. "작은 breakpoint"로 생각하십시오.
div class="sm:text-center" => 작은 사이즈 (not 모바일)
이러한 이유로 디자인을 위한 모바일 레이아웃을 먼저 구현한 다음 sm 화면에 적합한 변경 사항을 레이어링한 다음 md 화면 등을 적용하는 것이 좋습니다.
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }Dark Mode
Tailwind에는 dark 모드가 활성화되어 있을 때 사이트 스타일을 다르게 지정할 수 있습니다. 현재 사용 중인 컴퓨터에서 설정한 라이트 모드 또는 다크 모드에 따라 dark가 자동으로 적용됩니다.
ex) dark:bg-slate-900
https://tailwindcss.com/docs/dark-mode
수동으로 다크 모드 전환
운영 체제 기본 설정에 의존하는 대신 수동으로 다크 모드 전환을 지원하려면 media 대신 class을 사용하십시오.
// tailwind.config.js
module.exports = {
// 클래스를 기준으로 다크모드 적용 (최상위 부모에 dark클래스 지정)
darkMode: 'class',
// @media(prefers-color-scheme)를 기준으로 다크모드 적용 (기본 값)
darkMode: "media",
}https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
prefers-color-scheme
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
@media (prefers-color-scheme: light) {
.themed {
background: white;
color: black;
}
}출처 : 노마드코더 캐럿마켓 Sugar님 댓글
