What is a better approach of writing AB tests?

[aspirisen]

Hello everyone, I wanted to ask if there are any utilities for ab tests?

Currently in my project the ab tests flags are placed in a class in the body and then used like this

.button {
  color: red;

  .ab_my_experiment-v1 & {
    color: blue;
  }

  .ab_my_experiment-v2 & {
    color: green;
  }
}

With tailwind is it possible to do smth like that?

<h1 class="bg-sky-500 ab_my_experiment-v1#text-3xl ab_my_experiment-v1#hover:bg-sky-700">
  Hello world!
</h1>

And the final css compiled by tailwind would be smth like in the first example.

Or maybe there are some other technics to handle ab tests?

[wongjn]

You could use @custom-variant to do this, something like: https://play.tailwindcss.com/TwaiWaE7z3?file=css

[aspirisen]

yes, and there is enough information for generating css during build phase because the class name selector is already in html layout
ab_my_experiment-v1:text-3xl

[aspirisen]

As I understand the problem here is that tailwind doesn't know what to do with ab_my_experiment-v1: part during build and doesn't know that it should generate nesting selector using left part ab_my_experiment-v1 as a class selector.

The @custom-variant allows tailwind to understand the css generation logic, but it has to be defined.
Maybe there is some another syntax to just use random class name in selector, smth like .ab_my_experiment-v1:text-3xl

[wongjn]

There is arbitrary variants like:

<div class="[.ab\_my\_experiment-v1_&]:text-3xl">

But you would still need to write that as plain text, i.e. this wouldn't work due to Tailwind not running your code:

<div class="[.${testing_id}_&]:text-3xl">

You'd still need to write it out in full as per the first example, which seems counter to what you're trying to achieve, if I understand you correctly.

Edit: added underscore escapes

[aspirisen]

Yes, looks like what is needed, thanks!

p.s. but looks like the underscores must be escaped: <div class="[.ab\_my\_experiment-v1_&]:text-3xl">
but this is not a problem, the ab tests flags creating can be changed

[wongjn]

Ah yes, edited, thanks