[React] 게시판 만들기 - Tailwind CSS 적용

저번에 만들 게시판에 Tailwind CSS적용에서 빠진 부분이 있습니다.

index.css 파일 수정부터 진행하겠습니다.

1. 먼저, src폴더 안의 있는 index.css 파일을 찾아주세요.

2. 이 파일을 텍스트 에디터로 열어주세요.

3. 파일의 모든 내용을 지우고 다음의 코드로 교체합니다.

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

이 세줄의 코드는 Tailwind CSS이 기본스타일, 컴포넌트 스타일, 그리고 유틸리티 크래스들을 불러 오는 역할을 합니다.

4. 파일을 저장합니다.

Tailwiind CSS 가 제대로 작동하기 위해서는 tailwind.config.js 파일도 올바르게 설정되어 있어야합니다. 이 파일을 프로젝트 루트 디렉토리에 있어야합니다. 만약 없다면 다음 명령어로 생성할 수 있습니다.

npx tailwindcss init

그리고 tailwind.config.js 파일의 내용도 다음과 같아야합니다.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 설정은 Tailwind CSS 가 src 폴더 내의 모든 JavaScript 및 TypeScript 파일에서 사용된 클래스를 찾아 필요한 스타일만 생성하도록 합니다.

개발