TailwindCSS

TailwindCSS(https://tailwindcss.com/)란?

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

CSS를 직접 작성하지 않고 미리 정의된 클래스를 조합하여 스타일을 적용시킨다.
장점: 빠른 개발, 유지보수 용이, 중복 스타일 최소화
단점: 초반 적응이 필요하고, HTML이 클래스명으로 복잡해질 수 있음.

tailwind.config.ts 설정

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

속성	설명
content	Tailwind가 스타일을 적용할 파일들을 지정하는 부분 (필수)
theme	기본 Tailwind 테마를 확장하여 색상, 폰트 크기, 간격 등을 추가
extend	기존 Tailwind 스타일을 덮어쓰지 않고 확장하는 옵션
plugins	추가적인 Tailwind 플러그인을 적용하는 공간

반응형 설정하기

theme: {
  screens: {
    'xs': '400px', // 새로운 브레이크포인트 추가
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px'
  }
}

 

---

CSS3와 tailwind

CSS	TailwindCSS
border-radius	rounded
background-color	bg
text-align	text-left, text-center, text-right
letter-spacing: -0.025em;	tracking-tight
font-weight: bold;	font-bold
opacity: 0.5;	opacity-50
display: flex;	flex
display: grid;	grid
justify-content: center;	justify-center
align-items: center;	items-center
flex-direction: row;	flex-row
flex-direction: column;	flex-col
position: absolute;	absolute
position: relative;	relative
position: fixed;	fixed
overflow: hidden;	overflow-hidden
overflow: scroll;	overflow-scroll
z-index: 10;	z-10
width: 100%;	w-full
width: 50px;	w-[50px]
height: auto;	h-auto
height: 200px;	h-[200px]
max-width: 600px;	max-w-[600px]
margin-top: 20px;	mt-5 (1rem = 4단위)
padding: 10px;	p-2.5 (0.625rem)
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);	shadow-md
cursor: pointer;	cursor-pointer
display: none;	hidden
visibility: hidden;	invisible
transition: all 0.3s ease;	transition-all duration-300 ease-in-out
transform: rotate(45deg);	rotate-45
scale: 1.1;	scale-110

Tailwind 전용 속성

	CSS	TailwindCSS
border	border-left: 2px solid black;	border-l-2 border-black
	border-top: none;	border-t-0
Flexbox(Gap)	gap: 10px;	gap-2.5
	row-gap: 20px;	gap-y-5
	column-gap: 5px;	gap-x-1
backdrop	backdrop-filter: blur(10px);	backdrop-blur-md
	backdrop-filter: brightness(50%);	backdrop-brightness-50
::placeholder	::placeholder { color: gray; }	placeholder-gray-500
	::placeholder { font-weight: bold; }	placeholder:font-bold
grid(column/row span)	grid-column: span 2;	col-span-2
	grid-row: span 3;	row-span-3

---

Peer와 Group

• peer → 형제 요소 간 스타일 변경 (ex: input이 checked되면 label 색 변경)
• group → 부모 요소에 hover 같은 상태 변화를 감지하여 내부 요소 스타일 변경
• Tailwind의 peer와 group을 활용하면, JavaScript 없이도 인터랙티브한 스타일 변경이 가능하다.

peer

• input 같은 요소의 상태 변화(예: checked, focus 등)에 따라 다른 형제 요소의 스타일을 변경할 때 사용됨.
• peer 클래스를 input 같은 요소에 추가하면 해당 요소가 상태 변화할 때, 같은 부모 안의 다른 요소에서 peer-* 클래스로 반응 가능.

<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer hidden" />
  <span class="text-gray-500 peer-checked:text-blue-500">Check me!</span>
</label>

• input 요소에 peer 클래스를 추가.
• peer-checked:text-blue-500 → 체크박스가 체크되면(checked 상태) span의 텍스트 색상을 파란색으로 변경.

group

• group을 부모 요소에 추가하면 자식 요소에서 group-* 클래스를 사용하여 스타일 변경 가능.
• hover, focus, active 같은 상태 변화를 부모 요소가 감지하고 자식 요소에 적용할 때 사용.

<button class="group flex items-center space-x-2 px-4 py-2 bg-gray-200 rounded-md hover:bg-blue-500">
  <span class="text-gray-600 group-hover:text-white">Hover me!</span>
  <svg class="w-5 h-5 text-gray-600 group-hover:text-white" fill="currentColor">
    <path d="M5 12h14"></path>
  </svg>
</button>

• group을 버튼에 추가.
• group-hover:text-white → 버튼이 hover되면 span과 svg의 색상이 흰색으로 변경됨.

peer + group

<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer hidden">
  <span class="text-gray-500 peer-checked:text-blue-500">Enable button</span>
</label>
<button class="group w-32 px-4 py-2 bg-gray-300 text-gray-500 rounded-md peer-checked:bg-blue-500 peer-checked:text-white">
  Click Me
</button>

• peer-checked:bg-blue-500 → 체크박스가 체크되면 버튼 배경이 파란색으로 변경.
• peer-checked:text-white → 버튼 텍스트 색상이 흰색으로 변경.

---

arbitrary variants (임의 변수) 기능을 활용한 스타일링 방법

[&_   ]:  자식 요소 스타일링

[&_*] === [&_p]:text-red-500 → div 내부의 모든 <p> 태그에 적용됨.

<div className="p-4 border border-gray-300 [&_p]:text-red-500">
  <p>이것은 빨간색 텍스트입니다.</p>
  <p>이것도 빨간색입니다.</p>
</div>

[&_span] === [&_span]:text-yellow-300 → 버튼 내부의 <span> 요소만 노란색으로 변경.

<button className="bg-blue-500 text-white px-4 py-2 [&_span]:text-yellow-300">
  <span>이 부분만 노란색</span>
</button>

[&:nth-child()]: 특정 자식 요소 스타일링

[&_li:first-child]: [&_li:first-child] → ul 내부의 첫 번째 <li>만 굵게 (font-bold) 적용

<ul className="list-none [&_li:first-child]:font-bold">
  <li>첫 번째 항목 (굵게)</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

[&>*]: 직계 자식 요소 스타일링

[&>*]: 직계 자식인 h1, p만 적용됨. div 안에 있는 또 다른 p 태그는 적용되지 않음.

<div className="p-4 border border-gray-300 [&>*]:text-red-500">
  <h1>이것은 빨간색 제목</h1>
  <p>이것도 빨간색</p>
  <div>
    <p>이건 적용 안 됨 (직계 자식이 아님)</p>
  </div>
</div>

[&:hover]: 부모가 hover 상태일 때 특정 요소 스타일링

[&:hover] : 부모 요소가 hover 상태일 때 특정 자식 요소의 스타일을 변경 가능. 마우스를 div에 올리면 내부 p 태그의 글자 색이 파란색으로 변경됨.

<div className="p-4 border border-gray-300 hover:[&_p]:text-blue-500">
  <p>마우스를 올리면 파란색으로 바뀜</p>
</div>

[&:has()]: 부모가 특정 자식을 포함할 때 스타일 적용

[&:has(input:checked)]: 부모 요소 안에 특정 요소가 포함되어 있을 때 스타일 적용 가능. 체크하면 label의 배경색이 green-500으로 변경됨

<label className="border p-4 [&:has(input:checked)]:bg-green-500">
  <input type="checkbox" className="hidden" />
  체크하면 배경색이 변경됨
</label>

[&:focus-within]: 부모가 focus 상태일 때 스타일 변경

[&:focus-within]: 부모 요소 안의 input이 포커스되었을 때 스타일 변경 가능. 입력 필드에 포커스를 주면 div의 배경색이 바뀜.

<div className="border p-4 [&:focus-within]:bg-gray-200">
  <input type="text" placeholder="입력하면 배경 변경됨" />
</div>

container + @container 컨테이너 쿼리

기존의 @media (max-width: 768px) 같은 반응형 설정이 아니라, 컨테이너 크기에 따라 스타일을 변경 가능. 컨테이너가 작아지면 text-xl → text-lg → text-base로 변경됨.

<div className="container mx-auto">
  <p className="text-xl sm:text-lg md:text-base">이 글자는 컨테이너 크기에 따라 크기가 달라짐.</p>
</div>

scroll-mt-* 스크롤 위치 조정

scroll-mt-*: Anchor 링크를 클릭했을 때, 스크롤 위치를 조정할 수 있음

<nav className="fixed top-0 w-full bg-white shadow-md p-4">
  <a href="#section1" className="mr-4">섹션 1</a>
  <a href="#section2">섹션 2</a>
</nav>

<div className="mt-20">
  <h2 id="section1" className="scroll-mt-20">섹션 1</h2>
  <p>내용...</p>

  <h2 id="section2" className="scroll-mt-20">섹션 2</h2>
  <p>내용...</p>
</div>

aspect-*-* 비율 유지 (aspect-ratio)

aspect-ratio-*: 이미지, 동영상 같은 요소에서 특정 비율을 유지할 수 있음

<div className="aspect-w-16 aspect-h-9 bg-gray-300">
  <img src="/example.jpg" className="object-cover w-full h-full" />
</div>