Как использовать @apply Tailwindcss и другие в CodePen

Я не верю, что CodePen имеет встроенную поддержку Tailwind CSS, поэтому я предполагаю, что вы используете CDN.

Таким образом, чтобы использовать @apply с версией CDN, согласно документации:

3. Попробуйте добавить собственный CSS.

Используйте type = "text/tailwindcss", чтобы добавить собственный CSS, который поддерживает все функции CSS Tailwind.

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

Кроме того, вы также можете вообще избегать @apply, как рекомендует Адам Ватан, создатель Tailwind:

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

  Признание: функция apply в Tailwind, по сути, существует только для того, чтобы обманом заставить людей, которых отпугивают длинные списки классов, попробовать фреймворк.

  Вы почти никогда не должны его использовать 😬

  Вместо этого повторно используйте HTML, наполненный утилитами.

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

  Могу с абсолютной уверенностью сказать, что если бы я начал Tailwind CSS с нуля, ничего бы не было @​apply 😬

  Поведение невероятно сложное, каждый изо всех сил пытается построить правильную мысленную модель того, что он должен делать, и это поощряет плохую архитектуру CSS.