TIL : 최종프로젝트 2일차

오늘은 회의를 진행하면서 어제까지 정하지 초기셋팅을 진행하던 중 tailwind 셋팅이 잘못되어 tailwind 적용되지 않는 에러가 났다. tailwind 셋팅과정을 정리해보려고 한다.

tailwind

: 일관성 있는 디자인 시스템 적용하기 좋고, 반응형 페이지를 구현하기에도 비교적 쉬우며, 클래스 이름을 고민하지 않아도 되는 등, 개발속도 및 효율성 측면에서 좋은 CSS프레임워크이다.

설치하기

npm install -D tailwindcss
npx tailwindcss init

오류 해결과정

1. 추가로 설치 진행하기

npm install -D tailwindcss@latest
npm install -D postcss@latest
npm install -D autoprefixer@latest
npm install -D postcss-loader

2. postccss.config.js 파일을 만들어서 코드 추가하기

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

3. tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로 추가하기

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

4. ./src/index.css에 Tailwind 지시문 추가하기

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

위 해결과정을 통해 오류를 해결할 수 있었다.
이번 오류는 셋팅하는 과정에서 일부만 설치하고 셋팅했기 때문에 생긴 오류였다.