Tailwind 커스텀 클래스 작성하기

1 minute read

2024-07-19

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@import './colors.css';
@import './animation/index.css';
 
@layer base {
  <!-- -->
}

분리된 css

colors.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    <!-- -->
  }
}

index 생략 안됨

animation/index.css

@import './button.css';

custom class

animation/button.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  .base-btn-transition {
    @apply transition-background duration-200 ease-linear;
    @apply transition-color duration-100 ease-linear;
  }
}

이렇게 되면 tailwind.config.ts 에 설정 없이 사용 가능해진다.

<div className="base-btn-transition">
</div>