admin管理员组

文章数量:1405128

I am using Tailwind CSS v4 and have added prefix and a custom variant. Please check this example:

I expected the active tab to have blue background with white text but it's not working as expected.

I am using Tailwind CSS v4 and have added prefix and a custom variant. Please check this example: https://play.tailwindcss/5eHxv2nUUS?file=css

I expected the active tab to have blue background with white text but it's not working as expected.

  • css
  • tailwind-css
Share Improve this question asked Mar 8 at 16:47 user3631047user3631047 3,3865 gold badges24 silver badges35 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

Two things:

  • Swap the variants applied to the classes so that tw: is always first.
  • Escape the colon (:) in your selector with a backslash (\). Without escaping the colon, it is parsed by the browser as the :active pseudo-class.

<script src="https://unpkg/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@import "tailwindcss" prefix(tw);

@custom-variant custom-tab-active {
  &.tw\:active {
    .custom-tabs & {
      @slot;
    }
  }
}
</style>

<div class="custom-tabs tw:flex tw:border-b tw:border-gray-300">
  <button class="tw:custom-tab-active:bg-blue-500 tw:custom-tab-active:text-white tw:px-4 tw:py-2 tw:border-b-2 tw:border-transparent">
    Tab 1
  </button>
  <button class="tw:active tw:custom-tab-active:bg-blue-500 tw:custom-tab-active:text-white tw:px-4 tw:py-2 tw:border-b-2 tw:border-transparent">
    Tab 2 (Active)
  </button>
</div>

本文标签： customvariant issue in Tailwind CSS v4 with prefixStack Overflow

版权声明：本文标题：custom-variant issue in Tailwind CSS v4 with prefix - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744891061a2630784.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。