[Error해결] TailwindCSS v4 plugin 적용방법

NextJS 블로그를 만들다가 react-markdown에서는 tailwindcss-typography가 적용되어야 하는데 적용방법을 ChatGPT한테 물어봤다.

수동으로 tailwind 설정파일을 만들라고 되어있었는데

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}', // MDX 페이지 포함
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

export default config

Tailwindcss v4 부터는 tailwind.config.js(ts) 파일이 사용되지 않는다!!

그래서 찾다가 NextJS(15.3.0) 에서 app/globals.css에서
@plugin을 이용하니 작동이 되었다.

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

tailwindcss-v4 css-first-configuration

Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:


tailwind.config.js 파일 대신 Tailwind를 가져오는 CSS 파일에서 모든 사용자 지정을 직접 구성할 수 있어 프로젝트에서 걱정할 파일이 하나 줄어듭니다:

The new CSS-first configuration lets you do just about everything you could do in your tailwind.config.js file, including configuring your design tokens, defining custom utilities and variants, and more


새로운 CSS 우선 설정을 통해 tailwind.config.js 파일에서 할 수 있는 거의 모든 작업을 수행할 수 있습니다. 여기에는 디자인 토큰 구성, 사용자 지정 유틸리티 및 변형 정의 등이 포함됩니다

참고사이트

• https://github.com/tailwindlabs/tailwindcss/discussions/13292
• https://www.reddit.com/r/tailwindcss/comments/1i1whrk/write_plugin_in_tailwind_40/