Tailwind CSS [2] 고급

HaJang·2025년 11월 15일
Tailwind CSS

Tailwind CSS

목록 보기
2/4

1) 반응형 디자인 (Responsive)

Tailwind는 모든 유틸리티 앞에 중단점(prefix) 을 붙이면 끝.

Prefix 의미 예시
sm: small (640px↑) sm:bg-red-500
md: medium (768px↑) md:flex
lg: large (1024px↑) lg:w-1/2
xl: x-large xl:text-4xl
2xl: 2x-large 2xl:px-20

<div class="p-4 bg-gray-200 sm:bg-blue-200 md:bg-green-200 lg:bg-yellow-200">
  반응형 박스
</div>

2) 필터

tailwind css는 요소에 대해 필터를 씌울 수 있는데,
흐림 , 밝기 , 대비 , 그림자 , 회색조 , 색조 회전 , 반전 , 채도 , 세피아등 다양하다.

해당 필터들은 중복하여 사용할 수 있다.

ex)

<img class="brightness-150 grayscale contrast-150 saturate-200 sepia" src="/image.jpg" />

2.1) Blur (블러)

배경 또는 요소 자체를 흐리게 만드는 효과.

<div class="blur-sm">가벼운 블러</div>
<div class="blur">기본 블러</div>
<div class="blur-md">중간 블러</div>
<div class="blur-lg">강한 블러</div>

이미지에 blur 적용

<img src="/img/photo.jpg" class="blur-md rounded-lg" />
  • blur-* → 요소 자체 흐림
  • backdrop-blur-* → 요소 뒤 배경 흐림
<div class="backdrop-blur-md bg-white/30 p-6 rounded-xl">
  배경만 흐려짐
</div>

2.2) Brightness (밝기)

<img class="brightness-50" src="/img/photo.jpg" />   <!-- 매우 어두움 -->
<img class="brightness-100" src="/img/photo.jpg" />  <!-- 기본값 -->
<img class="brightness-150" src="/img/photo.jpg" />  <!-- 조금 밝음 -->
<img class="brightness-200" src="/img/photo.jpg" />  <!-- 매우 밝음 -->

2.3) Contrast (대비)

<img class="contrast-50" src="/img/photo.jpg" />   <!-- 대비 낮음 -->
<img class="contrast-125" src="/img/photo.jpg" />  <!-- 대비 조금 강함 -->
<img class="contrast-200" src="/img/photo.jpg" />  <!-- 대비 매우 강함 -->

2.4) Drop Shadow (그림자 필터)

tailwind 기본 shadow-* 와 다르게, drop-shadow는 이미지 바깥 윤곽에만 그림자를 적용함.

<img class="drop-shadow-sm" src="/img/icon.png" />
<img class="drop-shadow" src="/img/icon.png" />
<img class="drop-shadow-lg" src="/img/icon.png" />

2.5) Grayscale (흑백)

<img class="grayscale" src="/img/photo.jpg" />       <!-- 완전 흑백 -->
<img class="grayscale-0" src="/img/photo.jpg" />    <!-- 원본 -->
  • hover 시 컬러로 돌아오기
<img class="grayscale hover:grayscale-0 transition" src="/img/photo.jpg" />

2.6) Hue-Rotate (색조 회전)

다른 색조 느낌으로 회전시키는 효과.

<img class="hue-rotate-15" src="/img/photo.jpg" />
<img class="hue-rotate-60" src="/img/photo.jpg" />
<img class="hue-rotate-90" src="/img/photo.jpg" />
<img class="hue-rotate-180" src="/img/photo.jpg" />

색상이 부드럽게 바뀜.

2.7) Invert (반전)

색상을 반전시키는 네거티브 필터.

<img class="invert" src="/img/photo.jpg" />      <!-- 반전됨 -->
<img class="invert-0" src="/img/photo.jpg" />    <!-- 원본 -->

2.8) Saturate (채도)

<img class="saturate-50" src="/img/photo.jpg" />   <!-- 채도 낮음 -->
<img class="saturate-100" src="/img/photo.jpg" />  <!-- 기본 -->
<img class="saturate-200" src="/img/photo.jpg" />  <!-- 채도 높음 -->
<img class="saturate-300" src="/img/photo.jpg" />  <!-- 매우 쨍함 -->

2.9) Sepia (세피아톤)

고전 사진 느낌.

<img class="sepia" src="/img/photo.jpg" />       <!-- 세피아 적용 -->
<img class="sepia-0" src="/img/photo.jpg" />     <!-- 원본 -->

hover로 세피아 제거

<img class="sepia hover:sepia-0 transition" src="/img/photo.jpg" />

3) 다크 모드

먼저 dark모드를 클래스 기반으로 설정해준다.

아래 코드에서 디폴트(light모드)에서는 background color가 white이다.
dark모드일 경우에는 background-color가 grey이다.

<div class="bg-white dark:bg-gray-800">

예시)
app.css

@import "tailwindcss";

/* dark:* 유틸리티는 .dark 클래스로 활성화 */
@custom-variant dark (&:where(.dark, .dark *));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="app.css" />

    <!-- 초기 theme 적용 (FOUC 방지용) -->
    <script>
      // 페이지 로딩 전에 먼저 처리해서 깜박임 방지
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        document.documentElement.classList.add("dark");
      }
    </script>
  </head>

  <body class="bg-white dark:bg-gray-900 text-black dark:text-white p-10">
    <h1 class="text-3xl font-bold">Tailwind Dark Mode Toggle</h1>

    <p class="mt-4 text-gray-700 dark:text-gray-300">
      이 페이지는 Tailwind CSS 다크 모드를 localStorage로 제어합니다.
    </p>

    <!--  토글 버튼 -->
    <button
      id="themeToggle"
      class="mt-6 px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
    >
      Toggle Dark Mode
    </button>

    <script src="theme.js"></script>
  </body>
</html>

thme.js (다크모드 토글 및 로컬스토리지 저장)

const htmlEl = document.documentElement;
const btn = document.getElementById("themeToggle");

// 버튼 클릭 시 다크모드 / 라이트모드 전환
btn.addEventListener("click", () => {
  if (htmlEl.classList.contains("dark")) {
    // 현재 dark → light로 변경
    htmlEl.classList.remove("dark");
    localStorage.theme = "light";
  } else {
    // 현재 light → dark로 변경
    htmlEl.classList.add("dark");
    localStorage.theme = "dark";
  }
});

4) CSS 변수로 테마 만들기 (@theme)

위에서 다크모드에 대하여 알아보았습니다.
그러나, dark:블라블라, dark:블라블라2 이런식으로 속성들을 계속 작송해주는 것은 유지보수가 힘들어집니다..ㅜㅜ

그렇기때문에 테마 변수를 만들거야합니다.

@import "tailwindcss";

/* Dark 모드 커스텀 variant */
@custom-variant dark (&:where(.dark, .dark *));

/* Components Layer */
@layer components {
  /* 카드 테마 */
  .card {
    @apply bg-white text-black p-4 rounded-lg shadow-md;
  }
  .card-dark {
    @apply dark:bg-gray-900 dark:text-white dark:shadow-lg;
  }
<html class="dark">
  <body class="p-8 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">

    <div class="card card-dark mb-4">
      <h2 class="text-xl font-bold">테마 카드</h2>
      <p>이 카드에는 light/dark 모드가 적용됩니다.</p>
    </div>

  </body>
</html>

5) 컬러 (넓은 색역)

5.1) Tailwind CSS 색상 팔레트

Tailwind에는 미리 설계된 풍부한 색상 팔레트가 기본 제공됩니다.

각 색상은 50~950까지 11단계 밝기로 나뉩니다.

50: 가장 밝음

950: 가장 어두움

<div class="bg-sky-50"></div>
<div class="bg-sky-500"></div>
<div class="bg-sky-950"></div>

5.2) 색상 유틸리티

Tailwind에서는 색상을 여러 속성에 쉽게 적용할 수 있습니다.

유틸리티 설명
bg- 배경색
text- 글자색
border- 테두리색
outline- 아웃라인 색
shadow- 그림자 색
ring- 포커스 링 색
accent- form 컨트롤 색
caret- 입력 커서 색
fill- SVG 채우기 색
stroke- SVG 선 색

<div class="bg-pink-100 text-gray-950 border-pink-300">
  Example
</div>

5.3) 불투명도(opacity) 조절

  • 슬래시(/) 뒤에 %를 붙여 불투명도를 조절 가능
<div class="bg-black/50"></div> <!-- 50% 불투명 -->
<div class="bg-sky-500/10"></div> <!-- 10% 불투명 -->
  • 임의값, CSS 변수도 가능
<div class="bg-pink-500/[71.37%]"></div>
<div class="bg-cyan-400/(--my-alpha-value)"></div>

5.5) OKLCH

  • L = 밝기 (0~1 또는 %)
  • C = 채도
  • H = 색상 각도 (0~360도)
--color-teal-500: oklch(70.4% 0.14 182.503);

70.4% → 밝기
0.14 → 채도
182.503 → 색상(청록색 계열)

5.6) CSS 변수와 커스텀 색상

Tailwind 색상은 --color-* CSS 변수로도 접근 가능

.color-text {
  color: var(--color-gray-950);
}

직접 테마 변수 추가

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
}

기본 색상 덮어쓰기 가능

@theme {
  --color-gray-50: oklch(0.984 0.003 247.858);
}

기본 색상 비활성화

@theme {
  --color-lime-*: initial;
  --color-fuchsia-*: initial;
}

6) CSS Grid 유틸리티

HTML에서 직접 레이아웃을 눈으로 보면서 짜기 좋다.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="p-4 bg-white rounded shadow">트리하우스</div>
  <div class="p-4 bg-white rounded shadow">아파트</div>
  <div class="p-4 bg-white rounded shadow">호숫가 별장</div>
  <div class="p-4 bg-white rounded shadow">디자이너 주택</div>
</div>

7) 전환 & 애니메이션

원하는 효과에 유틸리티 붙이면 바로 동작.

<button class="px-4 py-2 bg-blue-500 text-white rounded 
                transition-all duration-300 ease-in-out
                hover:scale-105 hover:bg-blue-600">
  호버 버튼
</button>

ease-in
ease-out
ease-in-out
ease-linear

8) Cascade Layer 지원

특이성 문제 해결을 위한 CSS Layers를 Tailwind가 기본 사용한다.

@layer theme, base, components, utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded;
  }
}

HTML에서:

<button class="btn-primary">버튼</button>

9) 논리적 속성

다국어 사이트를 위한 ltr, rtl 지원.

<div class="p-s-4 p-e-4">양쪽 padding (언어 방향에 따라 바뀜)</div>

<div dir="rtl" class="text-right border-s-4 border-blue-500">
  오른쪽에서 시작하는 언어 예제 (아랍어 등)
</div>

10) 컨테이너 쿼리 (@container)

요소의 크기에 따라 스타일이 바뀌는 최신 기능
부모 크기에 반응하므로 반응형의 한계를 극복함.

<div class="@container p-4 border rounded">
  <div class="grid grid-cols-1 @sm:grid-cols-2 gap-4">
    <img class="aspect-square @sm:aspect-3/2 object-cover" src="/img/1.jpg" />
    <img class="aspect-square @sm:aspect-3/2 object-cover" src="/img/2.jpg" />
    <img class="aspect-square @sm:aspect-3/2 object-cover" src="/img/3.jpg" />
    <img class="aspect-square @sm:aspect-3/2 object-cover" src="/img/4.jpg" />
  </div>
</div>

부모 요소가 좁으면 1열, 넓어지면 2열!

11) 그라디언트

Tailwind는 긴 gradient 문법 필요 없다.

<div class="w-full h-40 bg-gradient-to-r from-purple-500 via-pink-500 to-yellow-500 rounded-xl"></div>

유틸리티 조합만 하면 됨:

bg-gradient-to-r
from-red-400
via-orange-400
to-yellow-400

12) 3D Transform

요즘 애니메이션에서 3D 효과도 자주 씀.

<div class="w-40 h-40 bg-blue-400 
            transform perspective-1000 
            hover:rotate-y-12 hover:rotate-x-6
            transition-all duration-500">
</div>

가능한 속성:

rotate-x-
rotate-y-
translate-z-
scale-z-

더 자세한 사용법은 공식 홈페이지를 참조하길 바랍니다.

https://tailwindcss.com/

profile
HaJang
열심히 하장
이전 포스트

Tailwind CSS [1] 기본

다음 포스트

Tailwind CSS [3] Tailwind Plus

0개의 댓글