Arbitrary pointer events?

[filipesmedeiros]

Related: #316 (old!) and this #15681

I'd love to be able to do, for example, pointer-events-[visiblestroke], which does not seem to be possible at the moment.

[filipesmedeiros]

Tangential question: why not enable arbitrary values for all properties? It seems like this would be a much better candidate for arbitrary than, say, colours?

[RobinMalfait]

You can always use arbitrary properties: [pointer-events:visibleStroke]

[filipesmedeiros]

Oh right! Thank you! :)

[rozsazoltan]

For practicality, Robin's syntax is much shorter - follow that.

[pointer-events:visibleStroke]

I just like to point out that you can extend the Tailwind utility set however you want.

You can also extend the possibilities yourself using @utility, can enable arbitrary values:

• https://play.tailwindcss.com/mSiDoaK465?file=css

@utility pointer-events-* {
  pointer-events: --value([*]);
}

<div class="pointer-events-[visible]">Hello World</div>
<div class="pointer-events-[visibleStroke]">Hello World</div>

and even introduce a static values:

• https://play.tailwindcss.com/vHcKf9KnnU?file=css

@utility pointer-events-* {
  pointer-events: --value('visiblePainted', 'visibleFill', 'visibleStroke', 'visible', 'painted', 'fill', 'stroke', 'bounding-box', 'all');
}

<div class="pointer-events-visible">Hello World</div>
<div class="pointer-events-visibleStroke">Hello World</div>

or even introduce a new namespace:

• https://play.tailwindcss.com/P2diWjsuyD?file=css

@theme {
  --pointer-events-visible-painted: visiblePainted;
  --pointer-events-visible-fill: visibleFill;
  --pointer-events-visible: visible;
  --pointer-events-visible-stroke: visibleStroke;
  --pointer-events-painted: painted;
  --pointer-events-fill: fill;
  --pointer-events-stroke: stroke;
  --pointer-events-bounding: bounding-box;
  --pointer-events-all: all;
}

@utility pointer-events-* {
  pointer-events: --value(--pointer-events-*);
}

<div class="pointer-events-visible">Hello World</div>
<div class="pointer-events-visible-stroke">Hello World</div>

Or can combinate:

• https://play.tailwindcss.com/vQkfWTUOD1?file=css

@theme {
  --pointer-events-visible-painted: visiblePainted;
  --pointer-events-visible-fill: visibleFill;
  --pointer-events-visible-stroke: visibleStroke;
  --pointer-events-bounding: bounding-box;
}

@utility pointer-events-* {
  pointer-events: --value(--pointer-events-*, 'visible', 'painted', 'fill', 'stroke', 'all');
}

<div class="pointer-events-visible">Hello World</div>
<div class="pointer-events-visible-stroke">Hello World</div>

Related:

• User drag none utility class #8733 (reply in thread)
• https://tailwindcss.com/docs/pointer-events
• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#syntax

Note

The HTML code is just an example - and I know it's not fully functional, but minimal - check the utilities tab in the playground to see if the desired utility has actually been created.

[filipesmedeiros]

Amazing reply, thank you so much. Will definitely use these features in the future!