[Feature proposal]: ":fullscreen" CSS pseudo-class

[MasseGuillaume]

I would love to see support for https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen

[pinkplus]

+1

In the meanwhile I can achieve it by adding a custom plugin in tailwind.config.js:

  plugins: [
    plugin(function({ addVariant }) {
      addVariant('fullscreen', '&:fullscreen');
    })
  ],

[demccormack]

Thanks a lot, this is great! In my Vite project, I needed to omit the plugin() function call, so the plugins section of my tailwind.config.js is

  plugins: [
    function ({ addVariant }) {
      addVariant('fullscreen', '&:fullscreen');
    },

[iamandrewluca]

If someone needs support also for group and peer

plugins: [
	plugin(({ addVariant }) => {
		addVariant('fullscreen', '&:fullscreen');
		addVariant('group-fullscreen', ':merge(.group):fullscreen &');
		addVariant('peer-fullscreen', ':merge(.peer):fullscreen ~ &');
	}),
],

[karloskar]

When using v4 the same thing can be accomplished by adding @variant statements.

@variant fullscreen (&:fullscreen);
@variant group-fullscreen (.group:fullscreen &);
@variant peer-fullscreen (.peer:fullscreen &);

[iamandrewluca]

Shouldn't there be a tilda (~) between .peer:fullscreen and &? 🤔

@variant peer-fullscreen (.peer:fullscreen ~ &);

[RobinMalfait]

When using v4 the same thing can be accomplished by adding @variant statements.

@variant fullscreen (&:fullscreen);

@variant group-fullscreen (.group:fullscreen &);

@variant peer-fullscreen (.peer:fullscreen &);

Drop the group-fullscreen and peer-fullscreen variants, they are automatically available 👍

E.g.: https://play.tailwindcss.com/P93mEXuJr2

[karloskar]

You're right @RobinMalfait! No need for the group- and peer- versions.

Also a nice and very useful use of https://play.tailwind.com 🙏