[리액트] Tailwind CSS 사용해보기

React

[리액트] Tailwind CSS 사용해보기

ejunyang 2024. 6. 19. 21:16

심화프로젝트 사전 기획 중 스타일링은 어떤 라이브러리를 사용할껀지 논의하다가 강민 튜터님께서 next.js를 쓰면 Tailwind css는 자연스럽게 쓰는 추세라고 말씀해주셨다. 거진 고정적이라고.. 그래서 이번 프로젝트 때 테일윈드를 사용해보기로 합의했다. 한번도 써본적 없어서 좀 부담스럽지만 요새 계속 쓰는 추세라고하니 사용해보는게 좋을 것 같다.

TailWind CSS

성능 이슈와 클래스 네임 충돌 이슈를 줄이고, 유연하고 직관적인 스타일링을 제공한다. 공식 문서에서는

유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 빠르고 쉽게 스타일링을 적용할 수 있는 클래스를 제공한다 고 쓰여져있다.

📌 유틸리티 클래스란?
유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 `CSS 클래스`로, 
HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있습니다.
Tailwind CSS는 이러한 유틸리티 클래스를 대량으로 제공하여, 
별도의 CSS 작성 없이도 다양한 스타일을 구현할 수 있게 합니다. 
예를 들어,`bg-blue-500`은 배경색을 파란색으로, `p-4`는 패딩을 설정하는 유틸리티 클래스입니다.

성능

Tailwind CSS는 불필요한 스타일을 제거하고, 필요한 부분만 스타일을 적용하는 방식으로 성능 최적화
사용하지 않는 CSS를 제거하여, 최종 빌드 파일 크기를 최소화
CSS 파일의 크기를 줄이고, 애플리케이션 로딩 속도를 개선
Tailwind CSS는 React의 JSX 문법과 함께 사용할 수 있어, 스타일링 간편
Tailwind 설정 파일(tailwind.config.js)을 통해 색상, 폰트, 스페이싱 등 다양한 설정을 커스터마이징
다양한 설정 옵션을 제공하여, 프로젝트의 요구사항에 맞는 스타일링을 손쉽게 적용

📌 Purging CSS?
`Purging CSS`는 사용하지 않는 CSS를 제거하여 최종 빌드 파일 크기를 줄이는 과정을 의미합니다. 
Tailwind CSS는 이를 자동으로 처리해줍니다.

설치 및 기본 사용법

yarn add tailwindcss postcss autoprefixer

초기화 파일 생성

yarn tailwind init -p

tailwind.config.js

tailwind.config.js 수정

src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx인 파일을 대상으로 한다.

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

index.css

css에 적용하기

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

컴포넌트에 써먹기

inline-style

return (
    <div style={{display:"flex" flexDirection:"column" gap:"8px" marginBottom:"1.25rem"}} >
      {sortedPlace.map((place) => {
        return <PlaceItem key={place.id} place={place} />;
      })}
    </div>
  );

Tailwind CSS

return (
    <div className="flex flex-col gap-8 mb-20">
      {sortedPlace.map((place) => {
        return <PlaceItem key={place.id} place={place} />;
      })}
    </div>
  );

무조건 껐다 키기!!!!!!!!! 껐다 켜야지 적용된다 적용안된다고 울지마세요 엉엉 난 울었으니까..