Next.js - tailwindcss 세팅하기 (feat. Vite, 여러 에러들)

넥스트.js 에 tailwindcss 세팅을 해보자!

삽질을 너무 많이 해서 기록으로 남겨놓으려고 한다 :)

 

일단 기본 디렉터리를 보여주고 시작하려고 한다. 오늘의 주인공들을 기억해주시라

 

 

1. tailwindcss 설치하기 

postcss 와 autoprefixer 도 함께 설치를 해주어야 한다

package.json 에 이미 설치가 되어있다면 없는 놈들만 설치해주자

$ pnpm add -D tailwindcss postcss autoprefixer

 

**postcss 와 autoprefixer 를 함께 설치하는 이유

1. PostCSS
PostCSS는 CSS를 처리하기 위한 플랫폼 또는 도구입니다. PostCSS 자체는 아무 작업도 하지 않으며, 플러그인을 통해 CSS를 변환하거나 확장합니다.Tailwind CSS는 PostCSS 플러그인으로 동작하며, PostCSS를 통해 Tailwind의 유틸리티 클래스와 스타일을 생성합니다.
2. Autoprefixer
autoprefixer는 PostCSS 플러그인 중 하나로, CSS에 브라우저 벤더 프리픽스를 자동으로 추가합니다. 브라우저 호환성을 위해 추가되어야하는 속성들을 자동으로 추가 (display: -webkit-box 요런 것들이 추가됨)

 

 

2. tailwindcss 실행하기

실행잘되면 tailwindcss.config.js 파일이 생성된다. 

$ pnpm exec tailwindcss init -p

 

 

삽질) pnpm 에러

pnpm 에러가 뜨고 말았다. 찾아보니 pnpm - tailwind 간 이슈인 것 같았다. tailwindcss 버전을 낮추어 보았다.

 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "tailwindcss" not found

원래 4.x.x 에서  3.x.x 버전대로 낮췄다. 그랬더니 잘된다.

package.json 에 버전 낮추고 pnpm-lock.json, node_modules, .next 폴더 지우고 다시 pnpm install 해보자

"tailwindcss": "^3.4.17",

 

 

3. tailwincss.config.js 설정하기

css 를 적용할 파일디렉터리 범위를 설정해주자 content 의 배열로 설정 잘~ 해주어야 한다! 

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		"./plugin/**/*.{js,ts,jsx,tsx}", // Vite plugin 디렉터리
		"./src/**/*.{js,ts,jsx,tsx}", // next src 디렉터리
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

 

삽질) config 파일 충돌

넥스트 플젝 세팅시 tailwindcss 를 설치했더니 tailwind.config.mjs 가 자동생성 된듯 했다.

여기에 tailwind 실행을 하니까 tailwind.config.js 파일이 생성되었다. 충돌이 난다. 이렇게 되면 tailwind.config.mjs 를 지워주자

 

 

4. postcss.config.js 설정하기

얘는 뭐 별거없다. 복붙 고고

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

 

 

5. css 파일 만들어주기

tailwind 디렉티브를 써서 만들어주자

테스트를 위해 테스트 클래스도 만들었다.

// src/styles/global.css

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

.test {
 @apply bg-gray-500;
}

 

삽질) Unknown at rule @tailwind

@tailwindcss 부분에 노란 경고줄이 떳다. gpt 도 설치잘한거냐는 헛소리를 해서 포기하고 스택 오버플로우를 뒤지다가 vscode 세팅을 변경하여 해결하였다. warning -> ignore 로 변경하기

 

 

6. 컴포넌트에 tailwindcss 적용하기

요렇게 임포트하고 App 에서 태그에 test 클래스를 주어보았다.

// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@/styles/global.css";

const root = document.getElementById("root");

if (root) {
	ReactDOM.createRoot(root).render(
		<React.StrictMode>
			<App />
		</React.StrictMode>
	);
}

 

// App.tsx
const App = () => {

	return (
		<main className="test"> // 테스트 클래스 추가
			<CommentTable commentList={commentList} />
		</main>
	);
};

 

 

삽질) tailwindcss is not working

전혀 잘 안된다? 아예 보이질 않네? 에러도 안보여?

이번 놈은 잘들어간 건 보이는데 딱히 뭐가 문제인지 파악이 어려웠다. 같은 케이스를 찾기 위해 고군분투한 결과..! (두둥)

 

vite.config.ts 에서 css > postcss 의 플러그인으로 tailwindcss 를 추가해주어야 정상 작동한다!

// vite.config.ts 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import tailwindcss from "tailwindcss";

export default defineConfig({
	plugins: [react()],
	root: "plugin",
	resolve: {
		alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
	},
	css: {
		postcss: {
			plugins: [tailwindcss()], // 요놈을 추가하여야 한다.
		},
	},
	build: {
		rollupOptions: {
			.... 내용생략
	},
});