[환경설정] Next.js App Router 기반 TailwindCSS 폰트 커스텀 설정(V3)

1. TailwindCSS 설치

• TailwindCSS와 관련된 패키지 설치
• npx create-next-app 실행 시 Tailwind 옵션을 "Yes"로 선택했다면, npm install -D tailwindcss postcss autoprefixer 생략 가능

npm install -D tailwindcss postcss autoprefixer

• 설치 후 tailwind.config.js와 postcss.config.js 자동 생성
• 직접 생성해도 문제 X

npx tailwindcss init -p

2. devDepenencies 확인

• 설치된 버전은 다음과 같이 package.json에 반영됨

"devDependencies": {
  "tailwindcss": "^3.4.17",
  "postcss": "^8.5.6",
  "autoprefixer": "^10.4.21",
  "eslint": "^9",
  "eslint-config-next": "15.4.1",
  "@types/node": "^20",
  "@types/react": "^19",
  "@types/react-dom": "^19",
  "typescript": "^5"
}

3. Tailwind 경로 설정

• src 경로 꼭 추가하기!!!!!(이것 때문에 개고생 했다...)
• screens / colors / fontSize / keyframes / animation 설정

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    screens: {
      sm: "0px",
      md: "768px",
      lg: "1200px",
    },
    extend: {
      colors: {
        black_000000: "#000000",
        black_171717: "#171717",
        black_333236: "#333236",
        black_4B4B4B: "#4B4B4B",
        gray_787486: "#787486",
        gray_9FA6B2: "#9FA6B2",
        gray_D9D9D9: "#D9D9D9",
        gray_EEEEEE: "#EEEEEE",
        gray_FAFAFA: "#FAFAFA",
        white_FFFFFF: "#FFFFFF",

        violet_5534DA: "#5534DA",
        violet_8P: "#F1EFFD",
        red_D6173A: "#D6173A",
        green_7AC555: "#7AC555",
        purple_760DDE: "#760DDE",
        orange_FFA500: "#FFA500",
        blue_76A5EA: "#76A5EA",
        pink_E876EA: "#E876EA",
      },
      fontSize: {
        "3xl": ["32px", "42px"],
        "2xl": ["24px", "32px"],
        xl: ["20px", "32px"],
        "2lg": ["18px", "26px"],
        lg: ["16px", "26px"],
        md: ["14px", "24px"],
        sm: ["13px", "22px"],
        xs: ["12px", "18px"],
        xxs: ["10px", "16px"],
      },
      keyframes: {
        fadeOut: {
          "0%": { opacity: "1", visibility: "visible" },
          "100%": { opacity: "0", visibility: "hidden" },
        },
      },
      animation: {
        fadeOut: "fadeOut 3s ease-in-out forwards",
      },
    },
  },
  plugins: [],
};

4. 커스텀 폰트 사이즈 적용

<p className="text-3xl">제목</p>
<p className="text-md">본문</p>
<p className="text-xs">작은 글씨</p>