Add `scripting` variants

[lukewarlow]

This adds two variants for the scripting media query. noscript for when JavaScript is disabled and scripting for when it's enabled.

[adamwathan]

Hey thanks for this one! I do like to try and stay on the bleeding edge with what we support in Tailwind but since this isn’t even in Chromium yet I think I’d rather wait a bit longer before adding a first-class API for it and including it in the documentation.

So going to close for now but let’s revisit when browser support improves a bit?

[lukewarlow]

Oh I should have pointed out I've just implemented this in Chrome. So it'll be in version 120. @adamwathan

[lukewarlow]

Absolutely fine if you'd still rather wait but yeah worth being aware as of November this should be in all 3 browsers :)

[adamwathan]

Alright alright, will reopen 😅 Biggest blocker on all of these PRs for what it's worth is the immense documentation effort, but going to see if someone here can make time for it next week.

[lukewarlow]

That's absolutely fine, take as long as you need!

[lukewarlow]

Just as an fyi I chucked together a docs PR for the variant PRs https://github.com/tailwindlabs/tailwindcss.com/pull/1674 No worries if you'd rather get someone to go through it all themselves just thought I'd give it a go in case it helped :)

[mnik01]

In case if someone waiting this PR to be merged I've made temporary workaround based on custom media queries:

theme: {
  extend: {
    screens: {
      'noscript': { 'raw': '(scripting: none)' },
    },
  },
},

Usage:

<div class="noscript:hidden">
  Some JS dependant feature
</div>
<div class="noscript:block hidden">
  no js detected sorry :(
</div>

[lukewarlow]

Alternatively https://github.com/lukewarlow/tailwind-mq includes it.

[RobinMalfait]

Hey!

You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.

The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.

I also made sure to add you as a co-author because you still deserve all the credit 💪

[sdavids]

I do like to try and stay on the bleeding edge with what we support in Tailwind but [...] I rather wait a bit longer [...] let’s revisit when browser support improves a bit?

https://caniuse.com/?search=scripting

Global 81.82%