TailwindCSS 에 대해 알아보기

CSS At-Rule (지시어) : @media, @keyframes, @import, @layer 

Tailwind v4 전용 At-Rules: 

@theme : 디자인 토큰(색상, 폰트, spacing 등) 정의하는 영역

@utility : 새로운 유틸리티 클래스 정의하는 영역

@import "tailwindcss" : Tailwind 엔진을 불러오는 선언 

 

@theme {
  --color-brand-primary: #1A73E8;
  --spacing-large: 2rem;
}

 

@utility btn {
  @apply px-4 py-2 rounded bg-brand-primary text-white;
}

@utility btn-gradient {
  @apply px-6 py-3 rounded text-white;
  background: linear-gradient(to right, var(--color-brand-primary), var(--color-brand-secondary));
}

 

@theme 에서 정의한 변수의 Tailwind 클래스 변환 규칙 

Tailwind v4는 @theme 에서 정의한 변수를 자동으로 유틸리티 클래스 네임스페이스에 매핑함 

사용자가 변수명을 지정할 수 있고 Tailwind가 bg-, text-, p-, rounded- 같은 접두사와 결합된 클래스슬 생성함

@theme 변수 정의 예시	Tailwind에서 생성되는 클래스	적용 맥락
--color-brand-primary: #1A73E8;	bg-brand-primary, text-brand-primary, border-brand-primary	배경색, 텍스트색, 테두리색
--color-brand-secondary: #FF6F61;	bg-brand-secondary, text-brand-secondary, border-brand-secondary	배경/텍스트/테두리
--spacing-large: 2rem;	p-large, m-large, gap-large	패딩, 마진, 그리드/플렉스 간격
--font-heading: "Inter", sans-serif;	font-heading	폰트 패밀리 지정
--radius-card: 12px;	rounded-card	border-radius 적용
--shadow-soft: 0 2px 8px rgba(0,0,0,0.1);	shadow-soft	box-shadow 적용

 

사용자가 네임스페이스 규칙을 따르지 않은 임의이 변수를 지정하면 자동으로 테일윈드 유틸리티 클래스에 매핑되지 않음 

의미 있는 접두사를 붙여야 인식 가능

의미 있는 네임스페이스로 정의하던가 직접 유틸리티 정의를 해야 함

 

대표적인 CSS At-Rules 

At‑rule	설명	예시
@import	다른 CSS 파일을 불러옴	@import url("reset.css");
@media	미디어 쿼리 조건에 따라 스타일 적용	@media (max-width: 768px) { body { font-size: 14px; } }
@supports	브라우저가 특정 CSS 기능을 지원할 때만 적용	@supports (display: grid) { div { display: grid; } }
@font-face	커스텀 폰트를 정의	css @font-face { font-family: "MyFont"; src: url("myfont.woff2"); }
@keyframes	애니메이션 단계 정의	css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@page	인쇄 시 페이지 레이아웃 정의	@page { margin: 1cm; }
@namespace	XML 네임스페이스 지정	@namespace svg url("http://www.w3.org/2000/svg");
@layer	CSS Cascade Layers 정의 (스타일 우선순위 관리)	@layer base { body { margin: 0; } }

 

CSS 표준 at-rules 전체 목록 (주요/확장 포함)

At‑rule	설명	사용 예시
@charset	스타일시트의 문자 인코딩 지정	@charset "UTF-8";
@import	다른 CSS 파일을 불러오기	@import url("reset.css");
@namespace	XML 네임스페이스 정의	@namespace svg url("http://www.w3.org/2000/svg");
@media	미디어 쿼리 조건에 따라 스타일 적용	@media (max-width: 768px) { … }
@supports	브라우저가 특정 CSS 기능을 지원할 때만 적용	@supports (display: grid) { … }
@font-face	커스텀 웹폰트 정의	@font-face { font-family: "MyFont"; src: url("myfont.woff2"); }
@font-feature-values	OpenType 폰트 기능 값 정의	@font-feature-values MyFont { @styleset { fancy: 1; } }
@font-palette-values	컬러 폰트 팔레트 값 정의	@font-palette-values MyFont { base-palette: 2; }
@keyframes	애니메이션 단계 정의	@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@page	인쇄 시 페이지 레이아웃 정의	@page { margin: 1cm; }
@layer	Cascade Layers 정의 (스타일 우선순위 관리)	@layer base { body { margin:0; } }
@counter-style	사용자 정의 카운터 스타일	@counter-style custom { system: cyclic; symbols: "A" "B"; }
@property	CSS 사용자 정의 속성 등록	@property --my-color { syntax: ""; inherits: false; initial-value: red; }
@color-profile	색상 프로파일 정의	@color-profile sRGB { src: url("sRGB.icc"); }
@container	컨테이너 쿼리 정의	@container (min-width: 500px) { … }
@document (비표준)	특정 문서/URL 조건에 따라 스타일 적용	@document url("https://example.com") { … }

 

Tailwind v4에서 인식하는 주요 네임스페이스 패턴 

네임스페이스 패턴	생성되는 유틸리티	클래스설명
--color-*	bg-*, text-*, border-*, fill-*, stroke-*	색상 관련 토큰. 배경, 텍스트, 테두리, SVG fill/stroke에 매핑됨
--spacing-*	p-*, m-*, gap-*, space-x-*, space-y-*	여백/간격 관련 토큰. 패딩, 마진, flex/grid 간격에 매핑됨
--size-*	w-*, h-*, min-w-*, max-w-*, min-h-*, max-h-*	크기 관련 토큰. 너비/높이 및 min/max 제약에 매핑됨
--font-*	font-*	폰트 패밀리 관련 토큰. font-sans, font-heading 등으로 매핑됨
--text-*	text-*	폰트 크기 및 라인 높이 관련 토큰. text-sm, text-lg 등
--radius-*	rounded-*	border-radius 관련 토큰. rounded-md, rounded-card 등
--shadow-*	shadow-*	box-shadow 관련 토큰. shadow-sm, shadow-lg 등
--z-*	z-*	z-index 관련 토큰. z-10, z-50 등
--breakpoint-*	sm:*, md:*, lg:*, xl:*	반응형 브레이크포인트. 미디어쿼리 기반 클래스 생성
--transition-*	transition-*, duration-*, ease-*	애니메이션/트랜지션 관련 토큰
--container-*	container 변형	컨테이너 쿼리 관련 토큰

 

네임스페이스	@theme 정의 예시	생성되는 Tailwind 클래스	적용 맥락
색상 (--color-*)	--color-brand-primary: #1A73E8;	bg-brand-primary, text-brand-primary, border-brand-primary, fill-brand-primary, stroke-brand-primary	배경, 텍스트, 테두리, SVG fill/stroke
간격 (--spacing-*)	--spacing-large: 2rem;	p-large, m-large, gap-large, space-x-large, space-y-large	패딩, 마진, flex/grid 간격
크기 (--size-*)	--size-card: 300px;	w-card, h-card, min-w-card, max-w-card, min-h-card, max-h-card	너비/높이 및 min/max 제약
폰트 (--font-*)	--font-heading: "Inter", sans-serif;	font-heading	폰트 패밀리 지정
텍스트 크기 (--text-*)	--text-title: 1.5rem/2rem;	text-title	폰트 크기 및 line-height
모서리 (--radius-*)	--radius-card: 12px;	rounded-card	border-radius
그림자 (--shadow-*)	--shadow-soft: 0 2px 8px rgba(0,0,0,0.1);	shadow-soft	box-shadow
z-index (--z-*)	--z-modal: 9999;	z-modal	z-index
브레이크포인트 (--breakpoint-*)	--breakpoint-lg: 1024px;	lg:* (예: lg:bg-brand-primary)	반응형 미디어쿼리
트랜지션 (--transition-*)	--transition-fast: 150ms;	duration-fast, ease-fast, transition-fast	애니메이션/트랜지션
컨테이너 (--container-*)	--container-md: 768px;	container 변형	컨테이너 쿼리

 

색상, 간격, 폰트, 그림자, 반응형 등은 테일윈드의 @theme + Tailwind 기본 클래스로 표현 가능함 

복잡한 배경, 애니메이션, 특수 속성은 @utility 또는 순수 CSS로 직접 작성함 

테일윈드 플러그인 추가로 확장 가능 (테일윈드 커뮤니티 플러그인 확장성)

 

Tailwind 커뮤니티 플러그인 확장성 

테일윈드는 커뮤니티 플러그인을 통해 기능을 확장할 수 있음 

테일윈드는 PostCSS 기반이므로 플러그인을 통해 새로운 유틸리티, 컴포넌트, 변형 기능을 추가할 수 있음 

예: tailwind.config.js에서 plugins: [require('@tailwindcss/forms')]처럼 등록

 

대표적인 커뮤니티 플러그인 

@tailwindcss/forms  : 폼 요소 스타일링 단순화 

@tailwindcss/typography : 프로즈(문서, 블로그 글) 스타일링 최적화

@tailwindcss/aspect-ratio : 이미지/비디오 비율 제어

@tailwindcss/container-queries : 컨테이너 쿼리 지원

tailwindcss-animate : 에니메이션 유틸리티 추가

 

Tailwind v4 는 tailwindcss.config.js 를 사용하지 않고 CSS에서 직접 정의하므로 플러그인 확장성은 다음과 같이 확보함 

1. 테일윈드 커뮤니티 플러그인 설치 : npm install @tailwindcss/forms @tailwindcss/typography 

2. @import "@tailwindcss/forms"; 와 같이 정의하면 사용 가능 

3. 플러그인별 설정은 CSS변수 @theme에서 토큰을 정의하면 플러그인이 이를 읽고 적용함 

4. 커스텀 플러그인 작성도 가능 : @import or @plugin 

@import "tailwindcss";
@plugin "tailwindcss-skew"; /* 커스텀 플러그인 불러오기 */

 

PostCSS 

CSS를 변환하는 도구 체인: PostCSS는 CSS를 입력받아 플러그인을 통해 변환한 뒤 최종 CSS를 출력함

Tailwind의 기반 엔진 : 테일윈드는 PostCSS 플러그인으로 동작하며 CSS안의 @theme, @utility 등을 해석해서 유틸리티 클래스 생성 

확장성 : PostCSS 플러그인을 추가하면 CSS 기능을 확장할 수 있음 

예: Autoprefixer(브라우저 접두사 자동 추가), cssnano(최적화), Tailwind 플러그인 등 

 

커스텀 플러그인 작성 (v4) 예시

1. 플러그인 파일 작성 

// tailwindcss-skew.js
module.exports = function ({ addUtilities }) {
  const newUtilities = {
    '.skew-10': { transform: 'skewY(-10deg)' },
    '.skew-15': { transform: 'skewY(-15deg)' },
  }
  addUtilities(newUtilities, ['responsive', 'hover'])
}

2. CSS에서 불러오기 

@import "tailwindcss";
@plugin "./tailwindcss-skew.js";

@theme {
  --color-brand-primary: #1A73E8;
}

3. 사용 예시

<div class="skew-10 bg-brand-primary text-white p-4">
  커스텀 플러그인 적용된 박스
</div>

 

at-rule + identifier(or layer name) 

CSS에서 @layer base 같은 구문 

@layer는 CSS Cascade Layers를 정의하는 표준 at-rule이고 base는 레이어의 이름으로 개발자가 임의로 붙일 수 있고 스타일의 우선순위를 관리하는 데 사용됨 

@layer base {
  body { margin: 0; }
}

@layer components {
  .btn { padding: 1rem; }
}

@layer utilities {
  .text-center { text-align: center; }
}

 

Tailwind는 대부적으로 @layer base, @layer componetns, @layer utilities 를 사용해 스타일 구분함 

1) base : reset, 기본 스타일 

2) components : 버튼, 카드 같은 컴포넌트 스타일 

3) utilities : p-4, text-center 같은 유틸리티 클래스