카카오 엔터프라이즈 5기 먀옹팀의 프로젝트 PPLOG의 프론트엔드 기본 세팅 과정입니다.

🎨Tailwind CSS 세팅

Tailwind CSS란 무엇인가?

Tailwind CSS는 유틸리티-퍼스트(Utility-first) CSS 프레임워크로, 미리 정의된 클래스들을 사용해 스타일을 쉽게 적용할 수 있게 해줍니다. 일반적인 CSS와 달리, Tailwind CSS는 작은 유틸리티 클래스들로 페이지의 레이아웃과 스타일을 구성합니다.

Tailwind CSS를 사용하는 이유

1. 유연성과 빠른 작업 속도

• 미리 만들어진 클래스를 사용해서 CSS 파일을 별도로 작성하지 않고, HTML에서 클래스를 추가하는 방식으로 디자인을 빠르게 적용할 수 있습니다.

2. 작은 파일 크기

• purge 기능을 사용해 실제 사용하지 않는 클래스는 최종 CSS 파일에서 제거됩니다. 이로 인해 프로덕션 환경에서 더 작은 CSS 파일을 배포할 수 있습니다.

3. 모듈화 스타일

• CSS 클래스 충돌 문제를 신경 쓸 필요가 없으며, 작은 유틸리티 클래스를 조합해 UI 요소들을 스타일링하므로 유지보수도 수월합니다.

purge 기능은 설정 파일에서 지정한 경로 내 파일들을 스캔하여, 그 안에 사용된 Tailwind CSS 클래스만 추출하고 나머지 사용되지 않은 클래스는 모두 제거합니다.
tailwind.config.ts파일에서 content 옵션을 사용해 어떤 파일을 대상으로 Purge 기능을 적용할지 설정합니다.

세팅하기

사실 npx create-next-app을 사용해서 프로젝트를 생성할 경우, Next.js 14에서 기본적으로 Tailwind CSS를 세팅해 줍니다😁.

아래는 수동으로 Tailwind CSS를 세팅하는 과정입니다.

다음 명령어를 사용해 Tailwind CSS를 npm install합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

이 명령어로 tailwind.config.js파일을 생성하며 이는 Tailwind CSS 설정 파일이 됩니다.

• tailwind.config.ts 파일 설정
  tailwind.config.ts 파일에서 Tailwind CSS가 적용될 경로를 추가합니다.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}', // Next.js 13 이상에서 사용하는 폴더
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

그 다음 /styles/globals.css파일에 Tailwind CSS의 기본 스타일을 추가합니다.

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

이렇게 하면 Tailwind CSS의 기본 스타일, 컴포넌트 스타일, 유틸리티 클래스가 적용되며 Tailwind CSS를 사용할 수 있게 됩니다.

---

tailwind.config.ts와 postcss.config.mjs

tailwind.config.ts와 postcss.config.mjs는 Tailwind CSS와 PostCSS의 설정 파일로, 각각의 툴에서 프로젝트에 맞게 CSS 빌드 과정을 커스터마이징할 수 있는 역할을 합니다.

tailwind.config.ts의 역할

여기서 Tailwind CSS의 동작을 커스터마이징할 수 있으며, 테마 설정, 색상 팔레트 확장, 플로그인 추가 등을 할 수 있습니다.

1. Tailwind CSS의 적용 범위 설정 (content)

• 어떤 파일에 Tailwind CSS가 적용될지 경로를 설정합니다.

2. 테마 확장(theme)

• Tailwind CSS의 기본 테마를 커스터마이징하거나 확장할 수 있습니다.

3. 플러그인 추가(plugins)

• 추가 기능을 제공하는 플러그인을 설정할 수 있습니다.

아래는 tailwind.config.ts 파일의 예제입니다.

import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
      },
    },
  },
  plugins: [],
}

export default config

postcss.config.mjs의 역할

여기서 Tailwind CSS를 포함한 다양한 CSS 변환 기능을 설정할 수 있습니다. PostCSS는 CSS를 변환하기 위한 다양한 플러그인을 지원하는 도구입니다.

TailwindCSS는 PostCSS의 플러그인으로 동작하며, 이 설정 파일을 통해 추가적인 CSS 변환을 제어합니다.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

이 설정 파일에서 Tailwind CSS, Autoprefixer와 같은 플러그인을 설정하고 사용할 수 있으며, 프로젝트 빌드 중에 사용하지 않는 CSS를 제거하는 등의 최적화 작업을 수행할 수 있습니다.