TailwindCSS 커스텀 클래스명 추가하는 방법

2 minute read

2024-07-23

globals.css 에 추가하는 방법

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
   :root {
  }
}
 
 
/**
 *  Utils
 */
@layer base {
  .fcc {
    @apply flex justify-center items-center;
  }
}

이런 방법도 있고 플러그인으로 추가하는 방법도 있다. 이에 대한 방법은 다른 프로젝트에도 재사용성 이 더 좋기 때문에 나중에 더 깊게 알아보면 좋을 거 같다.

Plugin 추가

tailwind.config.ts

import plugin from 'tailwindcss/plugin';
 
const config: Config = {
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.fcc': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};