[SOLVED] custom-variant issue in Tailwind CSS v4 with prefix

custom-variant issue in Tailwind CSS v4 with prefix

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

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

Solution

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.com/@tailwindcss/browser@4.0.12"></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>