1. 설명 Tailwind v4는 별도의 JS 설정 파일 없이 CSS 파일 하나로 모든 설정을 관리한다. 핵심 수단이 @ 지시어(at-rule)이다. 2. @import Tailwind의 모든 기능을 불러오는 진입점이다. 반드시 CSS 파일의 최상단에 위치해야 한다. @import "tailwindcss"; 전체를 불러오지 않고 필요한 레이어만 선택적으로 불러올 수도 있다. @import "tailwindcss/preflight"; /* 브라우저 기본 스타일 초기화 */ @import "tailwindcss/utilities"; /* 유틸리티 … 더 읽기
2장: 레이아웃과 구조 v4 설치 및 기본 설정 v4 변경사항 — tailwind.config.js + @tailwind 지시어 방식이 CSS 기반 설정으로 전환됐다. # Vite 기반 프로젝트 (권장) npm install tailwindcss @tailwindcss/vite // vite.config.js import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [tailwindcss()], }) /* src/index.css — 단 한 줄로 전체 임포트 … 더 읽기
3장: 타이포그래피와 디자인 3-1. 타이포그래피 기초 폰트 패밀리 Tailwind는 세 가지 기본 폰트 스택을 제공한다. <p class="font-sans">Tailwind CSS로 만든 텍스트</p> <p class="font-serif">전통적인 세리프 폰트</p> <code class="font-mono">const x = 10;</code> 글꼴 크기 클래스 크기 용도 예시 text-xs 0.75rem (12px) 캡션, 태그 text-sm 0.875rem (14px) 보조 텍스트 text-base 1rem (16px) 본문 (기본) text-lg 1.125rem (18px) 강조 본문 … 더 읽기
4장: 컴포넌트와 UI 요소 4-1. 재사용 가능한 컴포넌트 패턴 @utility — v4 커스텀 컴포넌트 클래스 v3 → v4 변경사항 — @layer components { .btn { @apply … } } 방식 대신 @utility를 사용한다. v4에서도 @apply는 동작하지만 @utility가 권장된다. @utility란? — Tailwind의 유틸리티 클래스처럼 동작하는 나만의 클래스를 정의하는 문법이다. bg-blue-600 같은 기본 유틸리티와 동일한 우선순위로 적용되므로, … 더 읽기
반응형 디자인과 접근성 1. Tailwind의 반응형 시스템 Tailwind는 모바일 우선(Mobile First) 방식을 사용한다. 접두사가 없는 클래스는 모든 화면에 적용되고, 접두사가 붙은 클래스는 해당 브레이크포인트 이상에서 적용된다. 1.1. 기본 브레이크포인트 접두사 최소 너비 대상 기기 (없음) 0px 모든 화면 (모바일 기본) sm: 40rem (640px) 큰 모바일·소형 태블릿 md: 48rem (768px) 태블릿 lg: 64rem (1024px) 노트북·데스크톱 xl: … 더 읽기