Membuat Custom Class Tailwind dengan @apply Directive

Code ini hanya berlaku untuk anda yang membuat project Tailwind berbasis npm. Apabila anda merasa class-class pada tailwind terlalu panjang untuk anda pergunakan dalam membuat component, anda dapat memanfaatkan class-class tersebut dan mengemasnya kedalam 1 class khusus. Berikut merupakan cara pemanfaatannya, yaitu dengan menggunakan keyword @apply

@tailwind base;
@tailwind components;
@tailwind utilities;

h1 {
    @apply mt-12 text-4xl font-semibold mb-6 border-b pb-2
}

h1.secondary {
    @apply mt-12 text-4xl font-semibold mb-6 border-b pb-2 text-red-500
}

Dengan menggunakan keyword @apply, anda dapat menggunakan class-class Tailwind setelahnya. Sehingga, ketika di build, styling dalam class tersebut akan otomatis terapply pada style baru yang anda buat.