tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
default: "#ececec",
positive: "#64c964",
negative: "#fd565f",
},
},
},
plugins: [],
};자주 사용할 컬러를 따로 정의해두었다.
className에 text-default bg-positive 이런식으로 사용할 수 있음.
✨ 해결 방법
- 경로 확인하기
npx tailwindcss-cli@latest build -o tailwind.css-> 생성된tailwind.css파일을public으로 이동 ->_document.tsx에head태그 내에<link href="/tailwind.css" rel="stylesheet" />
pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
<link href="/tailwind.css" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
