[TailwindCSS]@apply|ktyr report

[TailwindCSS]@apply

CSS
Tailwind CSS

2025-02-08

@applyでTailwindCSSのユーティリティクラスをそのまま使える
css

@import "tailwindcss";
article .contents a{
  @apply border-b-1 border-dotted border-gray-400 hover:border-gray-800;
}

　
@layer componentsを使うと、TailwindCSSのコンポーネントスタイルとして追加できる。
css

@import "tailwindcss";
@layer components {
  .btn-custom {
    @apply bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition;
  }
}

　
html

<button className="btn-custom">カスタムボタン</button>