How to use layout variants in tailwind-css using jit?

Sites like youtube.com or twitch.tv have a feature I call alternative views, where the player uses more screenspace compared to the default view.

How is this possible to implemented in tailwindcss using the just in time compiler?

<html class="player-large">
<body>
    <!-- like using the build in darkMode: 'class' feature -->
  </div>
</body>
</html>

The layout will be done with tailwinds grids features and the 'player-large' class on the html tag is meant for toggling the view.

my hope is to use it somehow like this:

<video class="lg:col-span-2 lg:large-player:col-span-full">...</video>

How can this be done?

Solution

You can create new variant

tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  mode: 'jit',
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [

    plugin(function({ addVariant, e }) {
      addVariant('large-player', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.large-player .${e(`large-player${separator}${className}`)}` // this is CSS selector
        })
      })
    })

  ],
}

layout

<div class="large-player">

<div class="grid grid-cols-3 gap-6">
  <div class="h-32 bg-red-500 lg:col-span-2 lg:col-span-2 lg:large-player:col-span-full"></div>
  <div class="h-32 bg-red-500"></div>
</div>

</div>

DEMO here - toggle large-player class to see effect