[React] Tailwind CSS

tailwind 개념 및 설정 방법을 기록해보려고 한다.

Tailwind 개념

유틸리티 우선(Utility-First) css 프레임워크

여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미.

💡 유틸리티 우선이라고 하는 것은 기존에 정의된 값을 가져와 사용하는 것이 아니라 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있다.

<h1 className="text-3xl font-bold underline">
	Hello world!
</h1>

장점

1. Utility-First의 편리함과 빠른 개발
   • 스타일 코드가 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다.
2. bundle 사이즈가 작다
   • css를 적용하기 위해 .css, .scss 파일이나 css-in-js를 위한 컴포넌트들을 추가적으로 만들어 줄 필요가 없다.
3. css 사용을 위한 네이밍을 하지 않는다
4. 일관된 디자인
   • 모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 일관된 스타일로 구현
5. 쉽고 자유로운 커스텀
   • Tailwind는 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀 가능

단점

1. html 코드가 장황하고 복잡
   • 모든 요소에 대해 스타일을 적용하기 위해서는 class에 원하는 값들을 모두 넣어줘야함
2. 러닝 커브
   • 각 스타일의 클래스명을 익혀야함

Tailwind 설정

1. Install Tailwind CSS
   • Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

2. Configure your template paths
   • Add the paths to all of your template files in your tailwind.config.js file.

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

3. Add the Tailwind directives to your CSS
   • Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

4. Start your build process
   • Run your build process with npm run start.

npm run start

5. Start using Tailwind in your project
   • Start using Tailwind’s utility classes to style your content.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

참조사이트

TailwindCSS 공식사이트