如何在codepen中使用tailwindcss的@apply等

Question

是否可以，如果可以的话，如何使用

@apply

之类的东西并在 codepen 中扩展 tailwind 组件？例如做类似的事情：

.button {
           @apply rounded-4 border-2 border-blue-500;
}

我尝试使用

@apply

以及笔设置中的一些 css 预处理器来编写我的 css。

Answer 1

我不相信 CodePen 对 Tailwind CSS 有任何本机支持，所以我假设您正在使用 CDN。

因此，要将

@apply

与 CDN 版本一起使用，按照文档：

3.尝试添加一些自定义 CSS

使用

type="text/tailwindcss"

添加支持所有 Tailwind CSS 功能的自定义 CSS。

<style type="text/tailwindcss">
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
  }
</style>

以同样的方式，你会这样做：

tailwind.config = {
  theme: {
    extend: {
      borderRadius: {
        '4': '4px',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<style type="text/tailwindcss">
.button {
  @apply rounded-4 border-2 border-blue-500;
}
</style>

<div class="button">Foo</div>

---

顺便说一句，您可能还希望按照 Tailwind 的创建者 Adam Wathan 的建议完全避免

@apply

：

• https://twitter.com/adamwathan/status/1226511611592085504

  坦白：Tailwind 中的

  apply

  功能基本上只是为了欺骗那些因长长的类列表而推迟尝试该框架的人。

  你几乎不应该使用它😬

  改用实用程序乱七八糟的 HTML。

• https://twitter.com/adamwathan/status/1559250403547652097

  我可以绝对肯定地说，如果我从头开始使用 Tailwind CSS，就不会有

  @​apply

  😬

  这种行为极其复杂，每个人都在努力建立正确的心理模型来理解它应该做什么，并且它鼓励了糟糕的 CSS 架构。