[React] TailwindCSS 설치하기

0. Tailwind 란?

Tailwind CSS는 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다.
클래스 이름에 대한 모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동하며 제로 런타임으로 빠르고 유연하며 안정적입니다.

장점

1.  css 파일이 필요 없으며 style 태그를 사용하지 않고 스타일을 줄 수 있으므로 코드가 상당히 줄어드는 장점이 있습니다.

2. html 태그에 직접적으로 style을 주기 때문에 class name을 고민하지 않아도 됩니다.

3. 빠르고, 반응형 또한 쉽습니다.

 

단점

1. 코드의 가독성이 상당히 떨어집니다.

2. css에서 사용하는 코드와는 다르기 때문에 처음에는 공식문서를 참고하면서 스타일을 적용해줘야 합니다.

3. 기존 틀을 벗어난 커스텀디자인을 하려면 tailwind.config.js에서 직접 스타일을 지정해야 하는 경우가 많습니다.

 

 

1. 패키지 설치

npm install -D tailwindcss

 

2. tailwind.config.js 파일 생성

npx tailwindcss init

 

3. tailwind.confiog.js 에서 파일 경로 설정해주기

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

 

4. 최상위 css에 tailwind 지시문 추가

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

 

5. className을 사용하여 적용.

<p className="text-sm">
	Edit <code>src/App.js</code> and save to reload.
</p>