[NextJs] tailwindcss 설치(typescript,js)

tailwindcss 설치

js,ts 상관없이 설치하면됨. js -> ts로 변경할 필요 없음.

postcss.config.js, tailwind.config.js 위치는 root

tailwindcss postcss autoprefixer 설치

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

tailwind.config.js 설정

src, app 폴더 없을 경우 삭제해도 상관없음.

/** @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: [],
}

globals.css

안의 내용 전부 삭제 후 입력.

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

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: "./tailwind.config.js" },
    autoprefixer: {},
  },
};