[React] Tailwind CSS 커스텀(Custom) 설정 - tailwind.config.js 옵션, Tailwind CSS 선택자(가상클래스, 가상요소, 미디어쿼리, 반응형)

📌 Tailwind CSS 커스터마이징 (tailwind.config.js)

Tailwind는 기본적으로 제공되는 유틸리티 클래스를 사용해 빠르게 스타일링을 할 수 있지만,

각 프로젝트의 필요에 따라 커스터마이징이 필요할 때가 있습니다.

이를 위해 tailwind.config.js 파일을 활용하여 필요한 스타일을 쉽게 정의할 수 있습니다.

---

📝 설정 파일(tailwind.config.js) 구조

'📜tailwind.config.js' 파일은 Tailwind를 커스터마이징하는 핵심 파일입니다.

여기에서 theme, variants, plugins, darkMode 등의 설정을 추가하여 프로젝트에 맞는 스타일을 정의합니다.

/* 📜 tailwind.config.ts */
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*{.jsx,.tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

---

📌 Tailwind 설정 옵션 (사용자 정의 스타일 추가)

• content (Tailwind CSS 적용할 경로 설정)
• extend (확장)
• theme (테마)
• variants (변형)
• plugins (플러그인)
• darkMode (다크 모드)
• important (우선 적용)
• prefix (접두사)
• separator (구분자)
• screens (반응형 디자인)
• portrait & landscape (화면 방향)

설정 옵션	설명
content	Tailwind CSS를 적용할 HTML, JS 파일 경로를 설정합니다. 이 경로에 포함된 파일에서만 Tailwind 클래스가 동작합니다.
extend	기본 Tailwind CSS 스타일을 유지하면서 필요한 스타일만 추가할 때 사용합니다. 기존 값을 덮어쓰지 않고 확장합니다.
theme	Tailwind의 기본 테마 설정을 변경하거나 확장할 수 있습니다. 색상, 간격, 글꼴 등을 사용자 정의할 수 있습니다.
variants	특정 상태에서 동작하는 클래스 변형을 정의합니다. 예를 들어 hover, focus, active와 같은 상태에 대한 스타일을 설정할 수 있습니다.
plugins	Tailwind에 추가 기능을 제공하는 플러그인을 설정할 수 있습니다. 예를 들어, 타이포그래피 플러그인 등을 사용할 수 있습니다.
darkMode	다크 모드를 지원하도록 설정합니다. 'media' 또는 'class' 값을 통해 다크 모드가 적용되는 방식을 제어할 수 있습니다. 'media' 사용자 기기의 OS 설정에 따라 다크 모드가 자동으로 적용 'class' 사용자가 토글 버튼을 통해 다크 모드를 직접 선택할 수 있습니다. (.dark 클래스를 이용해 버튼에 클래스를 적용하면 다크 모드로 변경)
important	Tailwind CSS 클래스에 !important를 자동으로 추가하여 특정 스타일이 다른 스타일보다 우선하도록 하고 싶을 때 설정
prefix	클래스 이름 앞에 특정 접두사를 추가하여 클래스 이름 충돌을 방지합니다. 프로젝트 내 다른 CSS와의 충돌을 피할 때 사용합니다.
separator	상태 변형 클래스의 구분자(:)를 변경할 수 있습니다. 커스텀 구분자를 설정하여 CSS 클래스의 명명 규칙을 커스터마이징할 수 있습니다. 예를 들어, 기본적으로 hover:bg-blue-500처럼 콜론(:)을 사용하지만, 이 구분자를 '-'로 변경하면 hover-bg-blue-500과 같은 방식으로 사용할 수 있습니다.
screens	반응형 디자인을 위한 설정입니다. 다양한 화면 크기에 맞는 스타일을 적용할 수 있습니다. 예를 들어, sm, md, lg 같은 값을 사용할 수 있습니다.
portrait (screens 속성 사용)	세로 화면에서 적용되는 스타일을 설정합니다. raw: 'orientation: portrait' 같이 정의할 수 있습니다.
landscape (screens 속성 사용)	가로 화면에서 적용되는 스타일을 설정합니다. raw: 'orientation: landscape' 같이 정의할 수 있습니다.

 

---

🔎 content 경로 설정 - Tailwind CSS 적용할 경로

Tailwind CSS를 적용할 HTML 및 JS 파일의 경로를 설정합니다.

이 경로에 포함된 파일에서만 Tailwind CSS 클래스가 작동합니다.

 

📝 content 사용법

📁components 폴더 아래의 모든 하위 폴더에서 📜.jsx와 📜.tsx로 끝나는 파일에

Tailwind CSS를 적용하려면 다음과 같이 설정합니다.

// 📜 tailwind.config.js
content: ['./components/**/*{.jsx,.tsx}'],

 

---

🔎 테마(theme) 커스텀

테마 설정할 때는 먼저 카테고리를 나눈 후 각 카테고리에 맞는 값을 할당해야 합니다.

자주 사용하는 카테고리는 다음과 같습니다.

일반적으로는 색상(colors), 여백(spacing), 테두리(border) 등의 카테고리만 기억해 두고,

나머지는 필요할 때 찾아보는 것이 좋습니다.

• colors : 색상
• spacing : 여백
• fontSize : 글자 크기
• fontFamily : 글꼴
• fontWeight : 글꼴 두께
• lineHeight : 줄 높이
• borderRadius : 테두리 둥글기
• borderWidth : 테두리 두께
• boxShadow : 그림자

---

📝 테마(Theme) 커스텀 사용법 (➕extend 옵션)

extend 옵션을 사용하면 기존의 값을 유지하면서 필요한 것만 추가할 수 있습니다. 즉, 원하는 값만 더하는 방식

• 첫 번째 <div>는 text-red 클래스를 사용하여 텍스트를 빨간색으로 설정
• 두 번째 <div>는 bg-brand_main 클래스를 사용하여 배경색을 브랜드 색상으로 설정하고, 
  text-white 클래스를 사용하여 텍스트 색상을 흰색으로 지정합니다.
  p-4 클래스는 패딩을 추가하여 내용이 좀 더 여유롭게 보이도록 합니다.

 

Tailwind CSS의 기본 색상을 유지하면서 원하는 색상만 추가하여 사용

// 📜 tailwind.config.js
theme: {
    extend: {
        colors: {
            'red': 'rgb(255, 0, 0)', // 기존 색상에 'red'를 추가
            'brand_main': 'rgb(62, 175, 14)', // 새로운 브랜드 색상 추가
        },
    },
},

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
       <div className='text-red'>텍스트는 내가 정의한 빨간색입니다.</div>
       <div className='bg-brand_main text-white p-4'>이 배경은 브랜드 색상입니다.</div>
    </div>
}

 

---

🔎 변형(variants) 커스텀

특정 상태에서 동작하는 클래스 변형을 정의하여 스타일을 변경할 수 있습니다.

예를 들어, 마우스를 올렸을 때(hover)나 포커스 상태(focus)에서 스타일을 바꿀 수 있습니다.

 

📝 variants 사용법

배경색(backgroundColor) 변형을 hover와 focus 상태에서 사용할 수 있도록 정의합니다.

• 📜tailwind.config.js
  variants 섹션에서 배경색 변형을 hover와 focus 상태에서 사용할 수 있도록 설정
• 📜app.tsx
  버튼에 hover:bg-blue-700 클래스를 추가하여 
  마우스를 올렸을 때 배경색이 파란색에서 더 진한 파란색으로 변경
  또한 focus:bg-blue-700 클래스를 사용하여 버튼이 포커스될 때도 같은 색으로 변경

 

사용자 인터페이스에서 특정 상태에 따라 스타일이 동적으로 변화하여 더 나은 사용자 경험 제공

// 📜 tailwind.config.js
variants: {
    backgroundColor: ['hover', 'focus'], // hover와 focus 상태에서 배경색 변형 사용 가능
},

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
       <button className='bg-blue-500 text-white p-2 hover:bg-blue-700 focus:bg-blue-700'>
           마우스를 올리거나 포커스하면 배경색이 변경됩니다.
       </button>
    </div>
}

 

---

🔎 플러그인(plugins) 커스텀

Tailwind CSS에 추가 기능을 제공하는 외부 플러그인을 설정할 수 있습니다.

이를 통해 기본 제공되지 않는 스타일링 옵션을 추가하거나 기능을 확장할 수 있습니다.

 

📝 plugins 사용법

• 📜tailwind.config.js
  plugins 섹션에서 @tailwindcss/forms 플러그인을 추가하여 폼 요소의 기본 스타일 개선
  이 플러그인을 통해 <input>과 <button> 요소가 더 일관되고 아름답게 스타일링
• 📜app.tsx
  설정한 플러그인을 사용하여 입력 필드와 버튼에 Tailwind CSS 클래스 적용
  여기서 border, rounded-md, p-2, mb-4, bg-blue-500 등의 클래스를 사용해 폼 요소를 꾸밉니다.

 

플러그인을 활용하면 Tailwind CSS의 기능을 확장하여 더 많은 스타일링 옵션을 사용할 수 있습니다.

// 📜 tailwind.config.js
plugins: [
    require('@tailwindcss/forms'), // 폼 스타일링을 위한 플러그인 추가
],

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <form>
            <label className='block mb-2' htmlFor='name'>이름:</label>
            <input
                id='name'
                type='text'
                className='border border-gray-300 rounded-md p-2 mb-4 w-full'
                placeholder='이름을 입력하세요'
            />

            <label className='block mb-2' htmlFor='email'>이메일:</label>
            <input
                id='email'
                type='email'
                className='border border-gray-300 rounded-md p-2 mb-4 w-full'
                placeholder='이메일을 입력하세요'
            />

            <button type='submit' className='bg-blue-500 text-white p-2 rounded-md'>
                제출
            </button>
        </form>
    </div>
}

 

---

🔎 다크 모드(darkMode) 커스텀

Tailwind CSS에서 다크 모드를 지원하도록 설정할 수 있습니다.

이렇게 하면 사용자의 PC 환경에 맞춰 다크 모드가 자동으로 적용됩니다.

media(사용자 PC OS 환경), class(사용자가 바꿀 수 있게 - 버튼)

 

📝 darkMode 사용법

• 배경색
  bg-white는 기본 배경색이 흰색이고, 
  dark:bg-gray-800은 다크 모드에서 배경색을 어두운 회색으로 변경합니다.
• 텍스트 색상
  text-black은 기본 텍스트 색상이 검은색이고, 
  dark:text-white는 다크 모드에서 텍스트 색상을 흰색으로 변경합니다.
• OS 환경 감지
  사용자의 PC 운영 체제가 다크 모드를 활성화하고 있으면, 
  웹사이트의 테마도 어두운 색상으로 변경됩니다.

// 📜 tailwind.config.js
darkMode: 'media', // OS의 다크 모드 감지

 

 

✏️ 다크 모드 클래스 사용

이제 app.tsx 파일에서 다크 모드에 맞는 스타일을 추가할 수 있습니다.

아래의 예시처럼 dark 클래스를 사용하여 다크 모드에 적용될 스타일을 정의합니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div className='bg-white dark:bg-gray-800 p-4'>
       <h1 className='text-black dark:text-white'>안녕하세요!</h1>
       <p className='text-gray-700 dark:text-gray-300'>이것은 다크 모드 테스트입니다.</p>
    </div>
}

 

---

🔎 우선 적용(important) - Tailwind CSS 우선 적용

Tailwind CSS에서는 CSS 클래스에 !important를 자동으로 추가하여 스타일의 우선 적용 설정

이를 통해 다른 스타일 규칙과의 충돌을 방지할 수 있습니다.

 

📝 important 사용법

• 두 개의 텍스트 박스가 각각 빨간색과 파란색 텍스트로 설정되어 있습니다.
• 만약 다른 CSS 파일에서 이 텍스트들의 색상을 변경하려고 하면, 
  !important 덕분에 Tailwind의 색상 설정이 우선 적용됩니다.

 

✏️ 모든 Tailwind 클래스에 !important 적용

tailwind.config.js 파일에서 important 속성 true로 설정하면,

모든 Tailwind CSS 클래스에 !important가 자동으로 추가됩니다.

// 📜 tailwind.config.js
important: true,

 

 

✏️ 스타일 적용 예시

이제 app.tsx 파일에서 Tailwind 클래스를 사용하면, 이 클래스들이 다른 CSS 스타일보다 우선 적용됩니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className='text-red-500 bg-blue-200 p-2'>
            이 텍스트는 빨간색입니다.
        </div>
        <div className='text-blue-500 bg-red-200 p-2'>
            이 텍스트는 파란색입니다.
        </div>
    </div>
}

 

---

🔎 접두사(prefix) - 중복 클래스 이름 충돌 방지

Tailwind CSS에서 클래스 이름 앞에 특정 접두사를 추가하여 클래스 이름의 충돌을 방지할 수 있습니다.

이는 Tailwind CSS의 클래스가 다른 CSS 스타일에 의해 덮어쓰이지 않도록 보장합니다.

 

📝 prefix 사용법

• 두 개의 텍스트 박스가 각각 빨간색과 파란색 텍스트로 설정되어 있습니다.
• 여기서 모든 Tailwind 클래스 이름 앞에 'tw-'가 붙어야 하므로, 
  클래스 이름을 사용할 때 충돌을 방지할 수 있습니다.

 

✏️ 접두사 설정

'📜tailwind.config.js' 파일에서 prefix 속성을 설정하여 모든 Tailwind 클래스에 접두사를 추가합니다.

예를 들어, 'tw-'를 사용하면 모든 클래스 이름에 자동으로 이 접두사가 붙습니다.

// 📜 tailwind.config.js
prefix: 'tw-', // 모든 Tailwind 클래스에 'tw-'를 붙임

 

 

✏️ 스타일 적용 예시

이제 app.tsx 파일에서 Tailwind 클래스를 사용할 때는 앞에 'tw-'를 붙여야 합니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className='tw-text-red-500 tw-bg-blue-200 tw-p-2'>
            이 텍스트는 빨간색입니다.
        </div>
        <div className='tw-text-blue-500 tw-bg-red-200 tw-p-2'>
            이 텍스트는 파란색입니다.
        </div>
    </div>
}

 

---

🔎 구분자(separator) - 상태 변형 클래스 구분자 변경

Tailwind CSS에서 separator는 상태 변형 클래스의 구분자인 콜론(:)을 변경하는 데 사용됩니다.

이는 상태에 따른 클래스가 중복되거나 충돌하는 것을 방지하는 데 도움을 줍니다.

 

📝 separator 사용법

• 두 개의 텍스트 박스가 각각 빨간색과 파란색 배경으로 설정되어 있습니다.
• 클래스 이름의 상태 변형 구분자인 콜론(:) 대신 설정한 구분자 'F'를 사용하여 스타일 적용

 

✏️ 구분자 설정

'📜tailwind.config.js' 파일에서 separator 속성을 설정해 상태 변형 클래스 구분자를 변경할 수 있습니다.

예를 들어, 구분자를 'F'로 설정하면 상태 변형 클래스의 구분자 콜론(:)이 'F'로 바뀝니다.

// 📜 tailwind.config.js
separator: 'F', // 상태 변형 구분자를 'F'로 변경

 

✏️ 스타일 적용 예시

이제 Tailwind 클래스를 사용할 때는 상태 변형 클래스의 구분자로 'F'를 사용해야 합니다.

기본적으로 Tailwind에서는 hover:bg-red-500과 같이 콜론(:)을 사용하지만,

separator: 'F'로 설정하면 hover:bg-red-500 대신 hoverFbg-red-500으로 작성해야 합니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className='bgFred-500 text-white p-2'>
            이 텍스트는 빨간 배경입니다.
        </div>
        <div className='bgFblue-500 text-white p-2'>
            이 텍스트는 파란 배경입니다.
        </div>
    </div>
}

 

---

🔎 반응형 디자인 (screens) - 화면크기 대응 스타일 적용

Tailwind CSS의 반응형 디자인 기능을 통해 다양한 화면 크기에 맞는 스타일을 쉽게 적용할 수 있습니다.

이 기능을 사용하면 모바일, 태블릿, 데스크탑 등의 다양한 기기에 따라 다른 스타일을 적용할 수 있습니다.

 

📝 screens 사용법

• 첫 번째 텍스트 : 화면 크기 따라 글자 크기가 조정됩니다.
  • sm ➡️ 기본 크기
  • md ➡️ 더 크게
  • lg ➡️ 가장 크게
• 두 번째 박스 : 화면 크기 따라 배경 색상이 변경됩니다.
  • sm ➡️ 파란색
  • md ➡️ 초록색
  • lg ➡️ 빨간색

 

✏️ 화면 크기 정의

'📜tailwind.config.js' 파일에서 screens 속성을 사용하여 각 화면 크기를 정의합니다.

sm, md, lg와 같은 값으로 각 크기를 설정할 수 있습니다.

// 📜 tailwind.config.js
theme: {
    screens: {
        sm: '640px', // 모바일
        md: '768px', // 태블릿
        lg: '1024px', // 데스크탑
    },
},

 

 

✏️ 스타일 적용 예시

이제 app.tsx 파일에서 정의한 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className='text-center sm:text-left md:text-lg lg:text-2xl'>
            화면 크기에 따라 다른 글자 크기가 적용됩니다.
        </div>
        <div className='mt-4 bg-gray-300 sm:bg-blue-500 md:bg-green-500 lg:bg-red-500 p-4'>
            화면 크기에 따라 배경 색상이 변경됩니다.
        </div>
    </div>
}

 

---

🔎 화면 방향 (portrait & landscape) - 화면방향 따른 스타일 적용

Tailwind CSS에서 기기의 화면 방향(세로 또는 가로)에 따라 스타일을 변경할 수 있습니다.

주로 모바일 환경에서 화면을 세로(portrait) 또는 가로(landscape)로 전환할 때

다양한 스타일을 적용할 수 있습니다.

 

📝 portrait & landscape 사용법

• 첫 번째 박스는 화면이 세로일 때 배경 파란색, 가로일 때 배경 초록색 변경
• 두 번째 텍스트는 화면이 세로일 때 글자 크기가 작게, 가로일 때 글자 크기 크게 설정

 

✏️ 화면 방향 정의

'📜tailwind.config.js' 파일에서 screens 속성을 사용하여 세로와 가로 화면에 대한 스타일을 정의할 수 있습니다.

portrait 세로 화면, landscape 가로 화면 해당하는 설정입니다.

// 📜 tailwind.config.js
theme: {
    screens: {
        portrait: { raw: '(orientation: portrait)' }, // 세로 화면
        landscape: { raw: '(orientation: landscape)' }, // 가로 화면
    },
},

 

 

✏️ 스타일 적용 예시

이제 app.tsx 파일에서 정의한 화면 방향에 따라 다른 스타일을 적용할 수 있습니다.

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className='portrait:bg-blue-500 landscape:bg-green-500 p-4 text-white'>
            화면 방향에 따라 배경 색상이 변경됩니다.
        </div>
        <div className='portrait:text-sm landscape:text-lg mt-4'>
            세로 화면에서는 작은 글씨, 가로 화면에서는 큰 글씨가 적용됩니다.
        </div>
    </div>
}

 

---

📌 Tailwind CSS 선택자

Tailwind CSS는 다양한 상황에 맞게 스타일을 쉽게 조정할 수 있는 선택자를 제공합니다.

가상 클래스, 가상 요소, 그리고 미디어 및 기능 쿼리에 대해 알아보겠습니다.

 

🔎 가상 클래스 선택자

• 특정 상태나 이벤트에 반응하여 스타일을 적용하는 선택자

🔎 가상 요소 선택자

• 요소의 앞(before)이나 뒤(after)에 콘텐츠를 추가하거나, 추가적인 스타일을 적용하는 선택자

🔎 미디어 및 기능 쿼리

• 특정 화면 크기나 디바이스 상태에 맞춰 스타일을 적용할 수 있도록 하는 선택자

---

🔎 가상 클래스 선택자

📝 가상 클래스 선택자 사용

<div className='선택자:적용할TailwindCSS클래스명'>텍스트</div>

 

사용예시

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className="hover:bg-blue-500 focus:bg-red-500">
          텍스트
          {/* 마우스가 올라가면 파란색 배경, 포커스되면 빨간색 배경 */}
        </div>
    </div>
}

---

선택자	설명	사용 예시
dark	다크 모드일 때	dark:bg-black ➡ 다크 모드에서 배경을 검은색으로 설정
hover	마우스가 요소 위에 올라갔을 때	hover:bg-blue-500 ➡ 마우스를 올리면 배경이 파란색으로 변경
focus	요소가 선택되었을 때	focus:border-blue-500 ➡ 입력창 선택 시 테두리가 파란색으로 변경
focus-within	하위 요소 중 하나가 focus 상태일 때	focus-within:bg-gray-100 ➡ 내부 요소가 포커스될 때 배경이 연회색으로 변경
active	요소가 활성화되었을 때 클릭하거나 터치하는 동안의 상태	active:bg-red-500 ➡ 버튼 클릭 시 배경이 빨간색으로 변경
enabled	요소가 활성화되었을 때 요소가 사용 가능한 상태 (활성화된 상태)	enabled:bg-green-500 ➡ 활성화된 상태에서 배경이 초록색으로 설정
disabled	요소가 비 활성화되었을 때	disabled:bg-gray-300 ➡ 비활성화된 상태에서 배경이 회색으로 변경
visited	방문한 링크일 때	visited:text-purple-500 ➡ 방문한 링크의 텍스트 색상이 보라색으로 변경
checked	체크박스나 라디오 버튼이 체크된 상태일 때	checked:bg-green-200 ➡ 체크된 상태에서 배경이 연두색으로 변경
focus-checked	체크된 상태에서 focus가 있을 때	focus-checked:border-blue-400 ➡ 체크된 체크박스가 포커스될 때 테두리가 파란색으로 변경
placeholder	input 등의 placeholder 스타일링	placeholder:text-gray-400 ➡ placeholder 텍스트 색상을 회색으로 변경
read-only	input 등이 읽기 전용일 때	read-only:bg-gray-200 ➡ 읽기 전용 상태에서 배경을 회색으로 설정
first	첫 번째 자식 요소	first:font-bold ➡ 첫 번째 자식 요소의 글씨를 굵게 설정
last	마지막 자식 요소	last:text-red-500 ➡ 마지막 자식 요소의 텍스트 색상을 빨간색으로 변경
odd	홀수 번째 자식 요소	odd:bg-gray-100 ➡ 홀수 번째 요소의 배경을 연회색으로 변경
even	짝수 번째 자식 요소	even:bg-gray-200 ➡ 짝수 번째 요소의 배경을 더 밝은 회색으로 변경
group-hover	동일한 그룹 내 요소가 hover 되었을 때	group-hover:bg-blue-300 ➡ 그룹 내 요소에 마우스를 올리면 배경이 파란색으로 변경
group-focus	동일한 그룹 내 요소가 focus 되었을 때	group-focus:text-yellow-500 ➡ 그룹 내 요소에 포커스될 때 텍스트 색상을 노란색으로 변경
required	input 등이 required 속성을 가질 때	required:border-red-500 ➡ 필수 입력란에서 테두리를 빨간색으로 설정
invalid	input 등에 입력된 값이 유효하지 않을 때	invalid:border-red-600 ➡ 유효하지 않은 입력에서 테두리를 빨간색으로 변경

 

---

🔎 가상 요소 선택자

기존에 있는 HTML에 보여지는 데이터에 추가하기 위함이다.

이를 사용하기 위해서는 아래와 같이 사용한다.

선택자	설명	사용 예시
before	요소의 앞에 가상 요소 추가	before:content-['Hello'] ➡ 요소 앞에 "Hello"라는 텍스트 추가
after	요소의 뒤에 가상 요소 추가	after:content-['!'] ➡ 요소 뒤에 "!"라는 텍스트 추가

---

📝 가상 요소 선택자 사용

<div className='before:content-["앞에추가할텍스트"]'>텍스트</div>
<div className='after:content-["뒤에추가할텍스트"]'>텍스트</div>

 

사용예시

// 📜 app.tsx
import React from 'react';

export default function (){
    return <div>
        <div className="before:content-['가격'] after:content-['원']">
           14,000
        </div>
        {/* '가격14,000원' 출력 */}
    </div>
}

 

---

🔎 미디어 및 기능 쿼리

선택자	설명	사용 예시
sm (모바일)	모바일 화면(640px 이상)	sm:bg-blue-500 ➡ 모바일에서 배경을 파란색으로 설정
md (태블릿)	태블릿 화면(768px 이상)	md:bg-green-500 ➡ 태블릿에서 배경을 초록색으로 설정
lg (태블릿)	태블릿(1024px 이상)	lg:bg-red-500 ➡ 태블릿에서 배경을 빨간색으로 설정
xl (노트북)	노트북(1280px 이상)	xl:bg-yellow-500 ➡ 노트북에서 배경을 노란색으로 설정
2xl (PC)	PC(1536px 이상)	2xl:bg-purple-500 ➡ PC에서 배경을 보라색으로 설정
portrait (세로 방향)	기기 세로 방향	portrait:bg-gray-500
landscape (가로 방향)	기기 가로 방향	landscape:bg-gray-700

---

📝 반응형 사용

• 미디어 쿼리 정의
  • '📜tailwind.config.js' 파일에서 각 화면 크기(sm, md, lg, xl, 2xl) 
    기기 방향(portrait, landscape)에 대한 미디어 쿼리를 정의
  • 각 쿼리는 특정 화면 너비 또는 방향에서 적용될 스타일 설정
• app.tsx에서 스타일 적용
  • '📜app.tsx' 파일에서 각 미디어 쿼리를 사용해 배경색 설정
  • div는 화면 크기나 방향에 따라 다음과 같이 배경색 변경
    • 모바일 (sm) : 600px 이상일 때 배경색 파란색 (bg-blue-500)
    • 태블릿 (md) : 700px 이상일 때 배경색 초록색 (bg-green-500)
    • 태블릿 (lg) : 1000px 이상일 때 배경색 빨간색 (bg-red-500)
    • 노트북 (xl) : 1200px 이상일 때 배경색 노란색 (bg-yellow-500)
    • PC (2xl) : 1500px 이상일 때 배경색 보라색 (bg-purple-500)
    • 세로 방향 (portrait) : 세로 방향일 때 배경색 회색(bg-gray-500)
    • 가로 방향 (landscape) : 가로 방향일 때 배경색 어두운 회색(bg-gray-700)

// 1️⃣📜 tailwind.config.js - 'screens' 카테고리 사용
theme: {
    screens: {
        sm: '600px',     // 모바일
        md: '700px',     // 태블릿
        lg: '1000px',    // 태블릿
        xl: '1200px',    // 노트북
        '2xl': '1500px', // PC
        portrait: { raw: '(orientation: portrait)' },   // 세로 방향
        landscape: { raw: '(orientation: landscape)' }, // 가로 방향
    },
},


// 2️⃣📜 app.tsx - 사용자정의 미디어쿼리 적용
import React from 'react';

export default function (){
    return <div>
        <div className="sm:bg-blue-500 md:bg-green-500 lg:bg-red-500 xl:bg-yellow-500 2xl:bg-purple-500 portrait:bg-gray-500 landscape:bg-gray-700 w-full h-full flex items-center justify-center">
            <h1 className="text-white text-3xl">반응형 배경색</h1>
        </div>
    </div>
}

 

---