styles/globals.css

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

page에서는 Tailwind가 적용되는데 component폴더에 있는 파일에는 Tailwind가 적용되지 않는 문제가 발생했다.

tailwind.config.js

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

purge 배열에 pages 폴더에 있는 파일들에만 적용되게 설정해서 components 폴더에 있는 파일들에는 적용이 안되는 것이었다.

따라서 아래와 같이 tailwind.config.js 파일을 바꾸어 주었더니 잘 적용이 된다.

tailwind.config.js

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