如何在 CSS 中对类进行分组 - Tailwind

Question

我正在尝试对类进行分组，以便代码更加清晰易读。在 Tailwind 的文档中，它谈到了“@apply”，它可以用于此目标，但我正在使用 CDN，因此这对我不起作用。所以我的问题是，\xc2\xbf有什么形式可以实现我正在寻找的东西吗？也许使用 SASS/SCSS 或 LESS？

\n

这是我想要的一个例子：

\n

<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">\n  <li class="nav-element">\n    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Home</a>\n  </li>\n  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">\n    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">About Us</a>\n  </li>\n  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">\n    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Services</a>\n  </li>\n  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">\n    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Contact Us</a>\n  </li>\n  <button class="md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg">\n    Log In\n  </button>\n  <button class="md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg">\n    Sign In\n  </button>\n</ul>\n

\n

---

\n

<ul class="nav-elemnts">\n  <li class="nav-element">\n    <a href="#" class="nav-link">Home</a>\n  </li>\n  <li class="nav-element">\n    <a href="#" class="nav-link">About Us</a>\n  </li>\n  <li class="nav-element">\n    <a href="#" class="nav-link">Services</a>\n  </li>\n  <li class="nav-element">\n    <a href="#" class="nav-link">Contact Us</a>\n  </li>\n  <button class="button-login">\n    Log In\n  </button>\n  <button class="button-signin">\n    Sign In\n  </button>\n</ul>\n

\n

Answer 1

Tailwind 鼓励您使用组件。您应该使用一个允许您创建和使用组件的系统，而不是到处复制粘贴类。

由于您的问题只是 HTML + CSS，因此您实际上没有合适的工具。但如果您使用 JS、Python、PHP 等脚本语言，您可以从元素创建组件并重用它们。由于我熟悉 React 框架，我可以展示一个示例：

function NavElement(props) {
  return (
    <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
      <a href={props.href} class="text-x1 md:hover:text-yellow-300 duration-500">{props.children}</a>
    </li>
  )
}

然后将其用作

function NavElements() {
  return (
    <ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
      <NavElement href="/">Home</NavElement>
      <NavElement href="/services">Services</NavElement>
      <NavElement href="/about-us">About us</NavElement>
    </ul>
  )
}

正如您所看到的，通过这种方法，您可以将大量修饰符提取到一个小组件中，您可以多次使用该组件，而无需在代码中进行太多重复。

您可以自由选择任何能够制作组件的工具、语言、系统。这就是 Tailwind 希望您做的事情。