tailwindcss 최신 설치 및 환경 설정 방법

tailwind-css 설치 및 환경 설정 방법

• 테일윈드는 최신 업데이트에 따라 설정 방법이 많이 달라졌다.
• 일단 vite로 프로젝트를 먼저 설치 하는 방법부터 알아보자

1. npm i -D tailwindcss@3 postcss autoprefixer

   • y를 누른 후 프로젝트 이름을 설정 후 어떤 기술 스택을 사용할지 정하면 된다.
   • 그 후 프로젝트 폴더로 경로 변경을 한 후 npm i 를 한다.

2. npx tailwindcss init

   • 테일윈드를 설치했으니 환경설정을 할수 있는 파일을 생성한다.
   • tailwind.config.js 라는 폴더 생성

3. 테일윈드 환경설정 폴더에 아래처럼 코드를 작성한다.

    /** @type {import('tailwindcss').Config} */
    export default {
      content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    };

4. postcss.config.js 파일에 아래의 코드를 선언한다

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

5. index.css 파일에 @tailwind 3가지를 선언한다

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

tailwind css 에러 및 문제해결 방법

• 보통 Next.js 사용 시 프로젝트 설치할 때 tailwind도 선택해서 설치할 수가 있다.
• 하지만 최신 tailwind는 사용법이 너무나도 달라져서 초기 프로젝트 환경설정 시 많은 에러를 겪었다.
• gpt프롬프트의 도움을 받는데 계속 에러가 발생하는 거였다...!
• 그 이유는 gpt는 최신 tailwind 업데이트 된 설정방법을 인지하지 못하고 있던거였다.
• 원인을 찾아낸 나는 구글에 검색을 해보았다. 하지만 업데이트가 된지 얼마 되지 않았고 이러한 에러관련한 블로그를 많이 찾아볼 수 없었기에 이또한 문제를 해결하는데 실패했다.
• tailwind 공식 홈페이지를 찾아가 docs문서를 보았는데 환경설정법이 나와있었다!!!!
• 결국 공식 홈페이지 토대로 설정을 하니 talwindcss가 잘 작동이 되었다.