TailwindCSS - Awesome한 기능들

✅ 반응형 디자인

sm -> @media(min-width: 640px)

md -> @media(min-width: 768px)

lg -> @media(min-width: 1024px)

dark -> @media(prefers-color-scheme: dark)

lg: grid-cols-2

라지 사이즈 화면에서는 2개의 column을 가진다.

✅ ring

ring-2

2px의 ring border가 생김

ring-offset-2

ring에 2px의 간격이 생김

ring-yellow-500

ring 색상 설정

focus:ring-2

focus시 ring 생성

ring-opacity-20

ring의 불투명도를 20%로 설정

✅ Transition

className에 transition을 추가하기만 하면 자동으로 예쁜 transition을 만들어준다.

✅ Modifiers for Lists

first: bg-blue-50, last: bg-blue-50

첫 번째 child와 마지막 child

only: bg-red-500

child가 하나만 있을 때

odd:, even:

홀수와 짝수

empty:

비어 있는 element 선택 (보통 empty인 child는 hidden으로 숨긴다.)

List 모양 바꾸기

list-decimal -> 리스트에 숫자를 붙여준다. (ol의 기본 스타일)

list-disc -> 디스크 모양 원 스타일 (ul의 기본 스타일)

marker: text-teal-500 -> 리스트 모양(marker)의 스타일을 변경

✅ Group Modifier

<div class="group hover:bg-gray-100">
  <p class="group-hover:text-blue-500">
    이 텍스트는 부모에 hover할 때 파란색이 돼
  </p>
</div>

해당 요소만 타겟팅해야 동작하는 것이 아니라 포함된 영역만 타겟팅해도 특정 요소를 변경할 수 있도록 해줌

✅ Peer Modifier

<div>
  <input type="checkbox" class="peer hidden" />
  <label class="peer-checked:text-blue-500">선택됨</label>
</div>

지원 상태 modifier

peer-hover:
peer-focus:
peer-checked:
peer-disabled:
peer-invalid:
peer-placeholder-shown:
등등...

단, peer가 peer selector보다 앞에 존재해야 한다.

(CSS가 top to bottom으로 동작하기 때문)

그리고 feer는 형제 요소 사이에서만 동작한다.

부모 자식 요소 사이는 group을 이용한다.

✅ File modifier

file: border-0

file 버튼만 변경

file:hover: text-purple-400

중첩도 가능

✅ Dark Mode

dark: bg-black

className에 dark를 넣으면 됨

Tailwind는 dark-mode 전환 버튼 기능을 제공한다.

하지만 이 기능을 사용하려면 우선 tailwind.config.js로 가서 컴퓨터의 다크모드 설정을 따라갈 건지, 아니면 리액트나 JS로 직접 토글 시킬 건지를 설정해줘야 한다.

기본값으로는 darkMode: "media"

이 값을 class로 바꾸면 dark-mode에 대한 media query가 사라진다.

class는 dark-mode를 수동으로 활성화시킬 수 있으며, 부모 요소에 "dark"라는 className이 있는지 확인한다.

예시) 네비게이션 바의 어딘가에 버튼을 만들고, 유저가 버튼을 클릭하면 html 태그에 "dark"를 추가하면 모든 요소들이 다크모드가 된다.

<html class = "dark" /> 혹은 body에 추가. (이 방식은 크게 선호는 x, 태그 수정하는 것이 귀찮다.)

✅ Just In Time Compiler

코드를 실시간으로 감시하면서 필요한 클래스를 생성하는 기능을 한다. (V3 이후부터 가능)

덕분에 bg-[url(`/vercel.svg`)] 이런 식으로 사용 가능 (custom 속성)

text-[#000]도 가능

tailwind.config.ts로 커스텀 class name도 생성할 수 있다.

import type { Config } from "tailwindcss";
import forms from "@tailwindcss/forms";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      margin: {
        tomato: "120px",
      },
      borderRadius: {
        "sexy-name": "11.11px",
      },
    },
  },
  plugins: [forms],
};
export default config;

borderRadius에 생성한 커스텀 class name은 rounded-sexy-name으로 사용 가능

Tailwind v4부터는 tailwind.config.ts 대신 Tailwind를 가져온 CSS파일(globals.css) (@import "tailwind" 파일)에서 직접 모든 사용자 정의를 구성할 수 있다.

✅ 짜잘한 메모

appearance-none

input이 갖고 있을지도 모르는 기본 스타일을 reset

pointer-events-none

마우스 이벤트를 완전히 무시

select-none

텍스트 드래그/복사 불가능, 클릭은 정상 작동하지만 블록 지정(select)만 불가

flex-1 === flex: 1 1 0%

flex-grow: 1; flex-shrink: 1; flex-basis: 0%;

text-base

text를 reset 해주는 역할(기본값)

space-x-5

child에 수평 방향으로 간격 생성

divide-y-2

child에 수직 방향으로 구분선 생성

inset-x-0

left: 0px & right: 0px

inset-y-0

bottom: 0px & top: 0px

mx-auto

margin-left: auto & margin-right: auto

max-w-md

최대 width를 md 사이즈로 제한

aspect-video

aspect-ratio: 16/9; (비디오 비율로 맞춤)

aspect-square

비율을 1:1로 맞춤

invalid:

입력값이 유효하지 않다면 적용할 style 지정 가능(일반 css selector)

부모 요소에 이 modifier를 주면 해당 요소의 모든 자식 요소들 선택 가능

has-[]:

자식 요소가 특정한 조건을 만족하면서 존재하면 스타일 적용 가능

empty:

text가 비어있는 element를 선택할 수 있다.

✅ Animate

animate-bounce

통통 튀는 효과

ex) notification

animate-spin

시계 방향으로 도는 효과

ex) spinner

animate-pulse

천천히 반짝이는 효과, 로딩 효과로 사용하면 좋음

ex) loader

animate-ping

물결이 파동치는 듯한 효과. 똑같은 크기의 도형을 중첩 시켜서 내부의 도형에 이 효과를 넣으면 알림 효과 같은 느낌을 낼 수 있음

ex) notification

✅ Directives

컴파일러는 생성된 CSS를 어디에 둘까?

globals.css 내의 directives들(import 되어있는 3개) (directive들은 placeholder 정도로 생각할 수 있다.)

컴파일러는 실제로 globals.css에 와서 이 directive들을 생성된 class name으로 대체한다.

왜 3개이며, 셋의 차이점은?

utilities: 컴파일러가 모든 utility class name들을 넣는 곳

base: 컴파일러가 tailwind와 함께 제공되는 기본적인 스타일 종류를 두는 곳(reset style 같은 느낌)

components: 말 그대로 tailwind style을 재사용하기 위해 컴포넌트가 필요할 때 className을 지정하여 해당 style들을 적어두기 위함

(해당 파일에서 경고 밑줄이 보기 싫으면 VSC의 밑 메뉴에서 언어를 CSS에서 Tailwind로 바꿔주면 된다.)

apply, layer directive

@layer base {
  a {
    @apply text-orange-500;
  }
}

Tailwind v4는 @tailwind base; @tailwind components; @tailwind utilities; 이 3줄이

@import "tailwindcss"; 한 줄로 축약됨.

✅ Plugins

tailwind.config.ts 파일은 plugins array를 갖고 있다.

이 곳에 third-party plugin들을 설치한다.

(plugin들이 하는 일은 base layer와 utilities layer와 components layer를 확장하는 것.)

누군가 커스텀한 컴포넌트가 있다면 복붙해올 필요없이 플러그인으로 설치하면 바로 기존 layer에 덮어쓰기가 된다.

(daisyUI: tailwind css를 위한 멋진 components 라이브러리, npm i daisyui@latest, plugins: [require("daisyui"])

plugin 추가 방법

import forms from "@tailwindcss/forms";

plugins: [forms]

Tailwind v4에서 plugin 추가 방법

globals.css에서 @plugin "@tailwindcss/forms";

'🌊 TailwindCSS' 카테고리의 다른 글

TailwindCSS - IntelliSense 자동완성을 첫 문자열부터 활성화 하는 방법 (0)	2025.09.17
TailwindCSS - Layer (0)	2025.09.10
TailwindCSS - 시작하기 (0)	2025.05.26

✅ 반응형 디자인

✅ ring

✅ Transition

✅ Modifiers for Lists

✅ Group Modifier

✅ Peer Modifier

✅ File modifier

✅ Dark Mode

✅ Just In Time Compiler

✅ 짜잘한 메모

✅ Animate

✅ Directives

컴파일러는 생성된 CSS를 어디에 둘까?

왜 3개이며, 셋의 차이점은?

apply, layer directive

✅ Plugins

'🌊 TailwindCSS' 카테고리의 다른 글

티스토리툴바