Tailwind 설치 방법

Tailwind CSS 설치 방법

Tailwind 공식 문서에서 알려주는 설치방법은 3가지인데, React에서 사용할 수 있는 방법은 아래 2가지다.

https://tailwindcss.com/docs/installation/framework-guides

Framework Guides - Tailwind CSS

1. Tailwind CLI

Tailwind CLI(Command Line Interface)로 간단하게 Tailwind CSS를 설치하고 빌드할 수 있다.

• 장점: CSS 파일을 최소한의 설정으로 빌드하고, 사용하는 유틸리티 클래스들만 자동으로 추출해 최적화된 CSS 파일을 생성한다. 작은 프로젝트에서 빠르게 사용할 수 있다. PostCSS나 Webpack 같은 복잡한 빌드 설정 없이 바로 사용할 수 있다.
• 단점: 대규모 프로젝트에서는 CSS 파일의 크기가 커질 수 있고, 다른 CSS 처리 도구와 통합하기 어렵다.

2. PostCSS

PostCSS는 CSS를 변환하는 도구로, Tailwind를 포함한 다양한 플러그인을 사용할 수 있다. Tailwind CSS를 PostCSS와 함께 설정하면, CSS를 더 세밀하게 제어할 수 있다.

• 장점: 대규모 프로젝트에서 유용하고, 다른 CSS 프레임워크 및 플러그인과 쉽게 통합할 수 있다. 최적화 및 커스터마이징 가능하다.
• 단점: 설정이 좀 더 복잡하고, 초기 설정이 필요하다.

요약:
- Tailwind CLI → 간편하고 빠른 설치, 작은 프로젝트에 적합.
- PostCSS → 더 많은 기능과 커스터마이징 제공, 대규모 프로젝트에 적합.

---

Tailwind 설치하기

아무래도 사용 방법을 제대로 이해하려면 직접 써봐야겠다는 생각이 들어서, 연습용 React 프로젝트를 만들고 Tailwind를 설치하여 사용해봤다. 설치는 PostCSS 방법을 사용했다.

# PostCSS 방식으로 Tailwind 설치
$ npm install -D tailwindcss postcss autoprefixer

# 설정파일(tailwind.config.js) 생성
$ npx tailwindcss init

이렇게 2개의 명령어를 순서대로 입력하면, 프로젝트 디렉토리 최상단에 tailwind.config.js 파일이 생긴다. Tailwind에서 기본적으로 설정되어 있는 것들 외에, 개인적으로 커스터마이징 하고 싶은 것들은 전부 여기에 작성한다.

tailwind.config.js는 scss의 루트 파일 같은 기능을 하는 파일이며, 아래 예시처럼 작성할 수 있다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx}'],
  theme: {
    extend: {
      colors: {
        main_green: '#05C799',
        sub_green: '#00a99b',
      },
    },
  },
  plugins: [],
};

• content: 여기서 지정된 경로에 있는 파일들에만 tailwind를 적용하겠다는 의미.
• theme: 컬러, 패딩 등 다양한 CSS 요소들을 커스터마이징하는 부분.
• plugins: 애니메이션 등 기본 유틸리티 외의 추가적인 기능이나 커스텀 유틸리티를 사용할 때 설정한다.

그리고 PostCSS도 설치했기 때문에 postcss.config.js 파일도 만들어야 하는데 아래 예시처럼 만들면 된다.

이 파일은 PostCSS가 사용할 플러그인을 설정하는 파일이며, 추가적인 플러그인을 넣어 CSS를 최적화하거나 특정 기능을 추가하고 싶을 때 사용한다. 이 중에 autoprefixer 플러그인은 CSS에 자동으로 브라우저 접두사(prefix)를 붙여서 다양한 브라우저 호환성을 자동으로 확보하게 만들어준다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};