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

问题描述 投票：0回答：5

我正在尝试对类进行分组，以便代码更清晰易读。在 Tailwind 的 documentation 中，它谈到了“@apply”，它可以用于这个目标，但我使用的是 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>
html css sass less tailwind-css
5个回答
5
投票

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

1
投票

我知道您要求使用 SASS/LESS 类型的方法，但我认为这会增加您可能不需要的额外复杂性。我认为一些简单的 JS 将是一个很好的候选解决方案。

我这样做的方法是用一个类名的 JSON 对象和一个实用函数来替换 CSS 或 StyledComponents 以将它们变成一个大字符串。

首先，实用性。把这个放在共享的地方：

// turns a JSON object's values into a single string (keys are irrelevant)

export const classify = (classes) => Object.values(classes).join(' ')

然后在 index.js 旁边的类似 styles.js 的文件中，我会：

import { classify } from 'shared/utils'

export const nav = classify({
  base: 'absolute bg-gray-800 w-full left-0 pr-7 pl-7 py-4 opacity-0 top-[-400px] z-[-1]',
  animation: 'transition-all ease-in duration-200',
  larger: 'md:flex md:items-center md:z-auto md:static md:w-auto md:py-0  md:pr-0 md:pl-0 md:opacity-100'
})

export const navItem = classify({
  base: 'px-4 py-6 hover:bg-yellow-500 text-white',
  resp: 'md:py-0 md:hover:bg-transparent',
  anim: 'duration-500'
})

这就像你的 CSS 文件。是的，您必须命名变量，但您还必须以其他方式命名您的组件，这样可以减少文件乱七八糟的情况。您还可以看到您的 HTML 结构，而不是一堆组件名称（很可能只是 div，smh）。此外，您可以在 JSON 中拥有任意数量的键/值，但是您认为适合组织以减少认知负荷，同时保持。

然后，HTML/JSX：

import * as styles from './styles'

export default Component = (props) => (
  <ul className={styles.nav}>
    <li className={styles.navItem}> ... </li>
    <li className={styles.navItem}> ... </li>
    <li className={styles.navItem}> ... </li>
  </ul>
)

我喜欢这种方法的一点是它与 CSS 工作流非常相似，JSON 对象允许您以任何您想要的方式组织类名（最好不要嵌套，否则您将需要更复杂的 

classify()
).使用组件，您仍然需要处理很长的字符串，当您应用了数十个类时，这会很烦人。如果愿意，您甚至可以在同一个文件中执行这些操作，它只是 JavaScript。

您甚至可以通过这种方式创建实用样式/类并将它们与模板字符串连接：

import * as utilStyles from 'utils/styles'
import * as styles from './styles'

<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>
...
</section>
0
投票

你试过吗：

<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>
0
投票

有两种方法可以对顺风类进行分组。一个使用 nodejs，另一个不使用 nodejs，即使用 CDN。使用脚本非常简单，您只需创建一个具有多个顺风类的变量并将其插入 DOM。

您可以使用 vanilla js 对类进行分组并应用到 DOM 上。如图所示，在 HTML 代码的末尾插入脚本。

<body>
<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>
<script>
let nav-link="text-x1 md:hover:text-yellow-300 duration-500"
Array.from(document.getElementsByClassName("nav-link")).forEach((el)=>el.className=nav-link)
</script>
</body>

-3
投票

您应该将“组”类添加到父级，并在使用组子类后：

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.