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

Question

我正在尝试对类进行分组，以便代码更清晰易读。在 Tailwind 的 documentation 中，它谈到了“@apply”，可用于此 objective 但我使用的是 CDN，因此这对我不起作用。所以我的问题是，¿是否有任何形式可以完成我正在寻找的东西？ 也许通过使用 SASS/SCSS 或 LESS？

这是我想要的示例：

<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">
  <li class="nav-element">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Home</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">About Us</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Services</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Contact Us</a>
  </li>
  <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">
    Log In
  </button>
  <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">
    Sign In
  </button>
</ul>

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

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 希望您做的事情。

Answer 2

你试过吗：

<style type="text/tailwindcss">
    @layer components {
      .some-class {
        @apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;
      }
    }
</style>

Answer 3

您应该将 'group' class 添加到父级并在与子组一起工作后 classes:

<div class="group p-4">
  <p class="group-hover:bg-red-400">lorem ipsum</p>
</div>

在这段代码之后，如果您将鼠标悬停在 div 元素上，p 元素的背景颜色将变为红色。

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

How to group clases in CSS - Tailwind

html

css

sass

less

tailwind-css