在 html 中将多个 class 名称转换为一个 class

Question

我在我的 vue 项目中使用预定义的 tailwind css。

<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text2</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text 3</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some other text</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">more texttttttttt</p>

如您所见，我必须为每个标签键入多个 classes。我想要的是有什么方法可以让变量 class 像这样 class 工作

<p class="grouped-class">text</p>
<p class="grouped-class">text 2</p>
<p class="grouped-class">text 3</p>

Answer 1

您可以使用@apply

HTML:

 <!-- Before extracting a custom class -->
<button class="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">
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">
  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;
  }
}

来自 tailwind 文档 https://tailwindcss.com/docs/functions-and-directives#layer

在 html 中将多个 class 名称转换为一个 class

convert multiple class name to one class in html

html

css

vue.js

tailwind-css

tailwind-ui