2024/06/18 Tailwind css

Tailwind?

• 유틸리티 퍼스트(Utility-First) CSS 프레임워크.
  CSS 클래스 이름을 직접 작성하는 대신 미리 정의된 유틸리티 클래스를 사용하여 UI를 구축.

설치

1-1. npm

• npm install -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p

1-2. yarn

• yarn add -D tailwindcss postcss autoprefixer
• yarn tailwindcss init -p

2. 루트 디렉토리에 tailwind.config.js 파일을 생성

• npx tailwindcss init

3. tailwind.config.js 변경

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. CSS 파일 생성 및 Tailwind 임포트

• src/index.css 파일을 열고 다음 코드를 추가

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

---

특징

1. 유틸리티 우선 접근법

• Tailwind CSS는 미리 정의된 유틸리티 클래스를 제공함.
  CSS를 직접 작성하지 않고도 필요한 스타일을 쉽게 적용

• ex) text-gray-500, bg-blue-500, rounded-lg
  각각 텍스트 색상, 배경색, 모서리 둥글기

2. 반응형 디자인

• 반응형 클래스를 제공

• ex) sm:text-gray-500, md:bg-blue-500, lg:rounded-lg
  각각 가로640px이상 색상 그레이 500, 가로768px이상 색상 블루 500,
  1024px 이상 모서리 둥글게

3. 상태 기반 스타일링

• hover, focus, active 등의 상태에 따른 스타일 적용을 지원

• ex) hover:text-gray-700, focus:bg-blue-600, active:rounded-xl
  각각 호버시 글씨색 회색 700, 포커스받았을때 배경 블루 600,
  활성화 되었을때 모서리 라운드 0.75rem.

4. 모듈화

• 모듈화된 방식으로 설계되어 있어, 필요한 부분만 선택적으로 포함가능.
  프로젝트 크기에 맞춰 Tailwind CSS의 크기를 최적화할 수 있습니다.

5. 확장성

• Tailwind CSS의 구성 파일(tailwind.config.js)을 통해
  사용자 정의 스타일, 테마, 플러그인 등을 추가할 수 있음.

---

사용법

<!-- HTML -->
<div class="bg-gray-200 p-8 rounded-lg shadow-md">
  <!-- 배경색: gray-200, 내부 여백: 32px, 모서리 둥글기: 12px, 그림자 효과 -->
  <h2 class="text-2xl font-bold mb-4">Welcome to my website</h2>
  <!-- 텍스트 크기: 2xl, 폰트 굵기: bold, 하단 여백: 16px -->
  <p class="text-gray-600 leading-relaxed">
    <!-- 텍스트 색상: gray-600, 줄 간격: relaxed -->
    This is a simple example of using Tailwind CSS to style a website.
  </p>
  <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mt-4">
    <!-- 배경색: blue-500, 호버 시 배경색: blue-600, 텍스트 색상: white, 폰트 굵기: bold, 내부 여백: y축 8px, x축 16px, 모서리 둥글기: 기본, 상단 여백: 16px -->
    Click me
  </button>
</div>

// src/App.js
import React from 'react';
import Button from './components/Button';

function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div className="bg-gray-200 p-8 rounded-lg shadow-md">
      {/* 배경색: gray-200, 내부 여백: 32px, 모서리 둥글기: 12px, 그림자 효과 */}
      <h2 className="text-2xl font-bold mb-4">
        {/* 텍스트 크기: 2xl, 폰트 굵기: bold, 하단 여백: 16px */}
        Welcome to my website
      </h2>
      <p className="text-gray-600 leading-relaxed mb-4">
        {/* 텍스트 색상: gray-600, 줄 간격: relaxed, 하단 여백: 16px */}
        This is an example of using Tailwind CSS in a React project.
      </p>
      <Button onClick={handleClick} className="mt-4">
        {/* 사용자 정의 버튼 컴포넌트, 상단 여백: 16px */}
        Click me
      </Button>
    </div>
  );
}

export default App;

---

Styled CSS vs Tailwind CSS

Styled CSS

• 자바스크립트 파일 내에서 CSS를 작성하는 방식
  컴포넌트 단위로 스타일을 관리할 수 있음

장점

• 컴포넌트 단위로 스타일을 캡슐화할 수 있어 관리가 용이.
• 자바스크립트 문법을 활용할 수 있어 동적인 스타일링이 가능.
• 코드 재사용성이 좋음.

단점

• 스타일 코드가 자바스크립트 파일에 포함되어 있어 가독성이 떨어짐
• 스타일 코드가 번들링 과정에서 증가할 수 있어 성능 저하의 우려

Tailwind CSS

• 유틸리티 클래스 기반의 CSS 프레임워크
  미리 정의된 클래스를 사용하여 스타일을 적용

장점

• 빠르고 효율적인 스타일링이 가능.
• 유틸리티 클래스를 조합하여 원하는 스타일을 만들 수 있음.
• 코드 가독성이 높음.
• 최적화된 CSS 파일을 생성하여 성능 향상을 가져올 수 있음.

단점

• 많은 유틸리티 클래스를 사용하다 보면 HTML 코드가 복잡해질 수 있음.
• 커스텀 스타일링이 필요한 경우 별도의 CSS 파일을 관리