🛠️환경설정

설치

(추가 예정)

tailwind.config.js 파일

content : tailwindCSS를 적용할 경로들을 빈 배열에 입력한다.
이때 프로젝트에서 src디렉토리를 사용한다면 src로 시작하는 경로 1개만 입력하면 된다.

// tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // `src` directory를 사용한다면
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

❗️내가 필요한 특정 값을 Tailwind에서 제공하지 않는 경우 대괄호[]를 사용한다. 하지만 특정 값이 여러 번 반복된다면 번거롭다.
🙆🏻‍♀️ tailwind.config.js파일에서 theme의 extend, color, fontFamily에 자주 쓰는 속성과 값들을 추가해준다.

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-pretendard)', ...defaultTheme.fontFamily.sans],
      },
      container: {
        center: true,
        padding: '24px',
        screens: {
          '2xl': '1328px',
        },
      },
      colors: {
        gray05: '#F8F9FA',
        gray10: '#F1F3F5',
        gray20: '#E9ECEF',

        content: '#F8F9FA',
        primary: '#0E1932',
        placeholder: '#ADB5BD',
        ring: '#0E1932',
        success: '#408249',
        error: '#FF5855',
      },
      flexBasis: {
        label: '150px',
      },
      minWidth: {
        label: '150px',
        orderStatusBox: '358px', // 주문/배송/반품 관리의 주문 처리현황 Box
        refundStatusBox: '281.6px', //주문/배송/반품 관리의 반품 처리현황 Box
      },
      backgroundImage: {
        home: "url('/img/home-background.png')",
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
}
export default config

다음과 같이 사용 가능하다.

  <!-- 배경 이미지가 설정된 영역 : backgroundImage의 home 사용 -->
  <div class="bg-home h-64 flex items-center justify-center">
    <h1 class="text-white text-3xl">환영합니다!</h1>
  </div>

  <!-- Flexbox 레이아웃 : flexBasis의 label 사용 -->
  <div class="flex p-4">
    <div class="flex-basis-label bg-gray30 p-4">
      레이블 1
    </div>
    <div class="flex-1 bg-gray10 p-4">
      내용 1
    </div>
    <div class="flex-basis-label bg-gray30 p-4">
      레이블 2
    </div>
    <div class="flex-1 bg-gray10 p-4">
      내용 2
    </div>
  </div>

  <!-- 최소 너비가 설정된 박스 : minWidth의 label 사용-->
  <div class="min-w-label bg-gray20 p-4">
    주문 상태: 배송 중
  </div>

app/global.css 파일

파일의 맨 위에 해당 코드를 추가하여 CSS에 Tailwind 디렉티브를 추가한다.

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer : Tailwind CSS의 스타일을 여러 레이어로 나누어 정의할 수 있게 해주는 지시어. tailwind Base, components, utilities 레이어에 스타일을 추가한다.
@apply : Tailwind CSS의 유틸리티 클래스를 CSS 규칙 내에서 사용할 수 있게 해주는 지시어

• 스타일을 3개의 layer로 구성하는 이유
  base layer : HTML 요소에 대한 기본 스타일을 설정하여 일관된 초기값 제공하는 레이어
  components layer : 재사용 가능한 UI 구성 요소의 스타일을 정의하는 레이어 ex) 버튼, 카드, 모달, 네비게이션 바
  utilities layer : 개별 CSS 속성을 클래스 형태로 제공하는 레이어 ex) text-shadow, bg-gradient

우리 프로젝트에서는 components에서 레이아웃 스타일을 정의하고, utilities에서 재사용 가능한 컴포넌트 스타일을 적용한 것 같다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-content;
  }

  button,
  a {
    @apply outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  }
}

@layer components {
  .page-container {
    @apply flex w-full flex-col gap-8 bg-gray10 p-8;
  }

  .contents-container {
    @apply mt-6 flex w-full flex-col gap-6 overflow-x-auto rounded-md bg-white p-4 shadow-sm;
  }

  .side {
    @apply flex w-1/2 flex-col gap-6 p-6;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .homeBg {
    @apply bg-cover bg-center bg-no-repeat;
  }

  .eco-select {
    @apply cursor-pointer appearance-none checked:bg-green70 checked:text-green70 checked:ring-transparent;
  }

  .delivery-price {
    @apply flex h-[43px] min-w-[127px] grow items-center rounded-sm border border-gray50 bg-white;
  }

  .general-button {
    @apply rounded border border-gray70 px-4 py-2;
  }

  .second-button {
    ...
  }

  .primary-button {
    ...
  }

  .green-button {
    ...
  }

  .product-detail-input {
    @apply grow rounded border border-gray50 placeholder:text-gray50;
  }

  .contents-bg {
    @apply flex rounded-lg bg-gray10;
  }

  .orderStatusCard {
    @apply flex min-h-[164px] flex-col gap-4 rounded-lg bg-gray10 px-6 py-12;
  }
}

참고

Next.js에서 Tailwind CSS 시작하기