Use o @apply e crie presets.
<style type="text/tailwindcss">
@layer utilities {
.icons {
@apply size-6 p-1 fill-zinc-600 rounded-md;
}
}
@layer base {
h1 {
@apply text-3xl font-bold;
}
h2 {
@apply text-2xl font-semibold;
}
h3 {
@apply text-xl font-semibold;
}
p {
@apply text-[0.775rem] font-semibold;
}
a {
@apply text-[0.775rem] font-semibold;
}
span {
@apply text-[0.775rem] font-semibold;
}
label {
@apply text-[0.775rem] font-semibold text-zinc-700 ;
}
input:not([type="checkbox"]) {
@apply p-1.5 bg-zinc-50 border rounded-md border-zinc-400 focus:outline-none focus:ring-[0.0775rem]
focus:ring-zinc-900 text-xs text-zinc-700 font-semibold;
}
}