[Next.js] Tailwindcss를 Next.js에 셋팅하기

이번에 tailwindcss를 써봤는데, 왜 사람들이 많이 이용하는지 이번 경험으로 느끼게 되었다. 그래서 내가 느낀점을 서술해볼려고 한다.

내 경우에는 next.js에서 Tailwind Css를 사용하기 위해서 설치하였다. 그래서 next.js에서 Tailwind Css를 사용하는 방법을 서술할 것이다.

1. 프로젝트 만들기

npx create-next-app@latest0 {my-project}

→ next프로젝트를 최신버전으로 만든다.

cd my-project
code .

2. Tailwind Css 설치

1) 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm을 통해 종속성을 설치한다.

• tailwind.config.js : Tailwind 설치를 구성하고 맞춤설정하기 위해서 설치한다. 맞춤형 사용자 인터페이스를 구축하기 위해 custom을 염두에 두고 설계하게 된다. 해당 파일은 프로젝트의 루트에서 설치하게 된다.
• postcss.config.js. : 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정한다. 해당 파일을 프로젝트 루트에 생성하고 설정 코드를 작성한다.

추가)

 💡 Error: Cannot find module 'autoprefixer’

 

만약 위와 같은 오류가 난다면,

npm install -D autoprefixer

autoprefixer가 설치안되서 해당 모듈을 찾는 오류가 날 수 있다. 그러므로 해당 모듈을 설치해주면 된다. package.json에 들어가서 해당 모듈이 설치되어 있는지 확인해보면 된다.

2) 경로 추가하기

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

공식문서에 해당 파일에 대한 경로를 추가하는 코드가 있다. 이를 추가하면 된다.

3) css에 tailwind 지시문 추가하기

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

Next.js에 style폴더에 global.css에 위의 코드를 추가해준다. 그래야 tailwind를 사용하는 것이 가능하다. 위의 코드를 사용해도 tailwind css가 적용이 안된다면 아래의 코드를 사용해야 한다.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

4) 프로젝트에 tailwind 사용

npm run dev

👇🏻 참고

https://tailwindcss.com/docs/configuration

https://tailwindcss.com/docs/guides/nextjs