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 Follow asked Mar 8 at 16:47 user3631047user3631047 3,38655 gold badges2424 silver badges3535 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: 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>