convert multiple class name to one class in html-CodePudding

i am using tailwind pre defined css in my vue project .

<p >some text</p>
<p >some text2</p>
<p >some text 3</p>
<p >some other text</p>
<p >more texttttttttt</p>

as you can see for each tag i have to type all this multiple classes. what i want is that is there any way to make variable class to work on class like this

<p >text</p>
<p >text 2</p>
<p >text 3</p>

CodePudding user response：

You can use @apply

HTML:

 <!-- Before extracting a custom class -->
<button >
  Save changes
</button>

<!-- After extracting a custom class -->
<button >
  Save changes
</button>

CSS:

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

From the tailwind docs https://tailwindcss.com/docs/functions-and-directives#layer