@apply
The following buttons are styled using custom classes (
.btn
,
.btn-primary
,
.btn-secondary
, etc.)
defined in the
<style type="text/tailwindcss">
block above.
Each custom class uses
@apply
to bundle several Tailwind utility classes.
How it works:
The
@apply
directive in Tailwind CSS allows you to inline existing utility classes into your own custom CSS.
This is useful for extracting repeated utility patterns into components or custom classes, keeping your HTML cleaner.
For example,
.btn-primary
applies
bg-blue-500 hover:bg-blue-700 text-white
along with base
.btn
styles.