我正試圖將類分組，這樣代碼會更清晰易讀。在順風的文檔中，它提到了& quot@應用& quot，可用于此目標，但我使用的是CDN，因此這不適合我。所以我的問題是，有沒有什么形式可以讓我完成我正在尋找的東西？也許通過使用薩斯/SCSS或更少？

以下是我想要的一個例子:

<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，你真的沒有合適的工具。但是如果你使用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>
  )
}

正如您所看到的，使用這種方法，您將龐大的修飾符列表提取到一個小組件中，您可以多次使用該組件，而無需在代碼中重復。

你可以自由選擇任何工具、語言、系統來制作組件。這就是順風希望你做的事情。

我知道您要求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>

你有沒有試過做:

<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>

有兩種方法對順風分類進行分組。一個有nodejs，另一個沒有nodejs，即使用CDN。腳本非常簡單，只需創建一個包含多個tailwind類的變量，并將其插入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>

我理解你在閱讀一長串css類并重復地將它們寫到某個組件時的頭痛。

感激地TailwindCSS有一種方法在單獨的文件中組織組件的類，所以你可以重用你的CSS類。方法是這樣的:

創建名為main.css的文件

@tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer components {
      .card {
        background-color: theme('colors.white');
        border-radius: theme('borderRadius.lg');
        padding: theme('spacing.6');
        box-shadow: theme('boxShadow.xl');
      }
      /* ... */
    }

然后您可以在您的組件中使用它:

<!-- Will look like a card, but with square corners -->
<div class="card rounded-none">
  <!-- ... -->
</div>

官方文件:鏈接

關于它的好文章描述:鏈接

您應該將“組”類添加到父類中，然后使用組子類:

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

在這段代碼之后，如果你懸停在div元素上，p元素backgroundColor將變為紅色。