Tailwindcss: Add hover states for shadows

[rigor789]

I have been waiting to get my hands dirty with tailwind, and just started playing around with it! I like it so far, but it does take some getting used to.

One of the utilities I am missing is hover:shadow since there are cases where we want to only have a shadow when hovering.

Now I know that I can add that utility myself pretty easily, but I thought that it is a fairly common thing to do, so might as well be considered to be added to the core.

[reinink]

Yep, I get this. We struggled with choosing what utilities to add hover states to. Ideally we would just add it to them all (like the responsive ones), but practically this doesn't work well since it would create a TON of classes and bloat the CSS filesize.

We're planning to make it possible in the future to choose which utilities have hover states and which ones do not. That should take care of this for you.

[rigor789]

That sounds like a good solution, and I can understand that adding a bunch of utilities is not ideal.

The ideal would be to filter out the unused utilities, but that is a whole different story, with it's own drawbacks. (there are tools that can do this, but detecting usage within javascript is tricky).

[reinink]

For sure, and you're welcome to use one of those plugins in your build process, you just need to be aware of the limitations.

[benface]

The ideal would be to filter out the unused utilities, but that is a whole different story, with it's own drawbacks. (there are tools that can do this, but detecting usage within javascript is tricky).

Would it be possible to write a Webpack plugin that does that, provided you wrap all class names in a function? For example in React you'd have something like:

import { classes } from 'tailwind'

return <div className={classes('w-10 h-10 hover:shadow')}>...</div>

[adamwathan]

The ideal would be to filter out the unused utilities, but that is a whole different story, with it's own drawbacks. (there are tools that can do this, but detecting usage within javascript is tricky).

As a quick note, I've tried purifycss for this in the past and while it is surprisingly good at detecting classes across PHP, HTML, JS, etc., it has some annoying bugs where it won't remove classes that end in numbers or contain non-standard characters:

https://github.com/purifycss/purifycss/issues/147#issuecomment-319375939

[regularlabs]

@reinink

Ideally we would just add it to them all (like the responsive ones)

It would be cool if we can black- or whitelist utilities for both the hover states and responsive stuff.
Having all utilities be responsive also bloats the final css, while practically you won't need all of these. So being able to control this in some way would be very nice!

[adamwathan]

Consolidate into #136.