[React] 리액트에서 TailwindCSS 사용하기

1. Tailwind CSS란?

Tailwind CSS는 유틸리티 중심의 CSS 프레임워크로, 개발자가 신속하게 사용자 인터페이스를 구축할 수 있도록 돕습니다. 전통적인 CSS 프레임워크와 달리, Tailwind는 사전 정의된 클래스를 제공하여 개발자가 원하는 스타일을 조합할 수 있게 합니다. 이 접근 방식은 코드의 재사용성을 높이고, 스타일링을 일관되게 유지하는 데 유리합니다. Tailwind는 반응형 디자인, 다크 모드, 커스터마이징이 용이하며, JIT(Just-in-Time) 모드를 통해 성능을 최적화할 수 있습니다. 이를 통해 복잡한 UI를 효율적으로 설계하고, 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

2. Tailwind CSS 특징

유틸리티 클래스: Tailwind는 다양한 유틸리티 클래스를 제공하여 개발자가 필요에 따라 빠르게 스타일을 조합할 수 있습니다. 이를 통해 코드의 재사용성을 높이고, 스타일링의 일관성을 유지할 수 있습니다.

반응형 디자인: 기본적으로 반응형 디자인을 지원하며, 다양한 화면 크기에 맞춰 스타일을 쉽게 조정할 수 있는 클래스가 마련되어 있습니다. 미디어 쿼리를 사용하지 않고도 쉽게 반응형 웹을 구축할 수 있습니다.

커스터마이징: Tailwind는 구성 파일을 통해 손쉽게 테마와 스타일을 커스터마이즈할 수 있습니다. 기본적으로 제공되는 스타일을 기반으로 하여 프로젝트에 맞는 디자인을 적용할 수 있습니다.

JIT(Just-in-Time) 모드: JIT 모드를 사용하면 필요한 클래스만 생성하여 페이지 로딩 속도를 개선할 수 있습니다. 이 모드는 개발 중 실시간으로 클래스가 생성되어 효율적인 작업이 가능합니다.

3. 설치 및 기본 사용법

설치 및 사용 순서 1 : npm 을 통한 설치

npm install tailwindcss
npx tailwindcss init

설치 및 사용 순서 2 : tailwind.config.js파일을 생성하고 다음 코드를 입력한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

설치 및 사용 순서 3 : 메인이 되는 css파일에 테일윈드를 가져온다.

@tailwind base;
@tailwind componwnts;
@tailwind utilities;

4. 커스터마이징

tailwind.config.js 파일에서 사이즈, 컬러 등을 커스터마이징 할 수 있다.

1. 반응형 디자인 화면 크기 커스터마이징

   /** @type {import('tailwindcss').Config} */
   module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    extend: {},
   },
   plugins: [],
   }

2. 색깔 커스터마이징

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    extend: {},
  },
  plugins: [],
}

3. 이외의 다른 요소들도 가능하다.