Next.js 환경에서 Tailwind 사용하기

Next.js 환경에서 Tailwind를 사용해 보려고 한다.

다음 공식 문서를 참고해 설치할 수 있다.

Install Tailwind CSS with Next.js - Tailwind CSS

 

프로젝트를 생성한 다음, 아래의 명령어를 사용하여 Tailwind CSS를 설치한다.

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

tailwind.config.js와 postcss.config.js 파일이 생성되어야 한다. 만약 생성되어있지 않다면, 파일을 생성하고다음 설정을 추가해야 한다.

tailwind.config.js:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

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

 

마지막으로, 프로젝트의 global CSS 파일 (styles/###.css)에서 Tailwind CSS를 import해야 한다.

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

이 css 파일을 _app.jsx에 import하면 Tailwind CSS 클래스를 프로젝트에서 사용할 수 있게 된다.

 

공식 문서에서 스크롤을 내리면 제공하는 클래스들을 확인할 수 있다.