tailwind css+ 기능으로 css 관련 기능들을 편하게 쓸 수 있게 해준다. 물론 component가 제공되는 ui framework와는 다르지만 기본적인 패딩이나 글자 크기 등의 디자인 시스템을 편리하게 사용할 수 있다. 특히 사용하는 부분만 빌드할 때 포함되는 걸로 유명해 졌다.

NEXT에 tailwind 설치하기

npm install -D tailwindcss postcss autoprefixer

또는

yarn add tailwindcss postcss autoprefixer -D

npx tailwindcss init -p

이렇게 하면 tailwind.config.js and postcss.config.js가 생긴다.

tailwind.config.js 에 사용하는 템플릿의 경로를 적어준다.

// tailwind.config.js

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

./styles/global.css 에 @tailwind 필요한 디렉티브를 추가해준다.

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

이렇게 한 후 yarn dev 또는 next run dev 를 해주면 된다.

<h1 className="text-3xl font-bold underline">Hello world!</h1>

다음 코드가 잘 나오는지 확인해 보자.

서버나 브라우저를 껐다 켜야 할 수 도 있다. 특히 global.css의 캐시가 남아있는 경우 브라우저를 리프레시해야 할 수 도 있다.