When using Alpine.js the x-cloak attribute is removed from DOM elements when Alpine is initialised. As noted in the docs, this makes it useful for hiding elements until Alpine is initialised:

x-cloak attributes are removed from elements when Alpine initializes. This is useful for hiding pre-initialized DOM. It's typical to add the following global style for this to work:

<style>
  [x-cloak] { display: none; }
</style>

You may want to hide pre-initialised DOM on some screen sizes, but not others. A good example for this is the links in a site's navigation bar, which are typically hidden by default on smaller screen sizes, but are always visible on wider screens.

So instead of hiding all elements with the x-cloak attribute, we can hide only the ones whose x-cloak attribute has no value:

[x-cloak=""] { display: none; }

This allows us to target elements whose x-cloak attribute has a value:

[x-cloak="some-value"] { }

So now we can write CSS rules targeting elements whose x-cloak value is mobile, tablet, desktop:

/* always hidden */
[x-cloak=""] { display: none; }

/* hidden on mobile/smaller screens */
@media screen and (max-width: 768px) {
    [x-cloak="mobile"] { display: none; }
}