代码之家 › 专栏 › 技术社区 › opensas

如何重写tailwindcss中的@apply指令

tailwind-css css html

0

opensas · 技术社区 · 4 年前

是否可以重写@apply指令?

我举了一个例子: https://play.tailwindcss.com/kyu6CxnBzB

.item {
  @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
}

<ul>
  <li class="item">About Us</li>
  <li class="item">Success stories</li>
  <li class="item text-red-50 bg-red-800">Contact</li>
  <li class="item">Blog</li>
</ul>

当我预料到的时候

第一个类define with apply(item)中的值似乎优先于其后指定的任何其他类

1 回复 | 直到 4 年前

1

Andrew Gillis 4 年前

@layer 通过如下方式定义类来解决此问题的指令:

@layer components {
  .item {
    @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
  }
}

参考文献: https://tailwindcss.com/docs/functions-and-directives#layer

推荐文章

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Erni · Laravel 9 Tailwindcss在代码更改后始终必须由npm运行dev

3 年前

Martin · 为什么我的单选按钮不起作用,而我得到了未终止的JSX内容?

3 年前