How to reuse a group of utility classes in Tailwind CSS without frameworks like React or Vue?

[snn1n]

I'm using Tailwind CSS in static HTML, without a framework
When I need to reuse a block like this:

<div class="w-full max-h-[234px] max-w-[458px] min-w-[418px] py-8 pl-[43px] pr-[46px] bg-[#FDFDFD] rounded-xl">

I don't want to copy all these classes every time.

What is the correct or recommended way to reuse this kind of markup in plain HTML?
Should I use @layer components with custom classes like .card, or is there a better way supported by Tailwind?

I'm not using React, Vue, or any other frameworks - just plain HTML with Tailwind CSS.

[adamwathan]

Hey! Check these docs: https://tailwindcss.com/docs/styling-with-utility-classes#using-custom-css

[snn1n]

Thank you!