3️블로그 설정 변경하기

패키지 버전 수정

테마 변경 기능을 사용하기 위해선 TailwindCSS를 적극 활용할 필요가 있습니다. 템플릿에서 추가된 TailwindCSS는 4.0 버전으로 설치되어 있는데 2024년 8월을 기준으로 문서가 부족해 원하는 기능을 활용하기 어렵습니다. 문서를 적극 활용하기 위해 다운그레이드를 해줘야 합니다.

TailwindCSS 공식 문서에 있는 가이드에 맞춰 다음 명령어를 입력하면 다운그레이드 할 수 있습니다.

pnpm install -D tailwindcss@latest postcss autoprefixer
npx tailwindcss init

TailwindCSS 설정 변경

템플릿에서 패키지 버전을 수정했다면 TailwindCSS와 PostCSS 설정을 수정해야 합니다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  content: ['./(app|src)/**/*.{js,ts,jsx,tsx,mdx}'],
}

postcss.config.js

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