Add hover states for shadows about tailwindcss HOT 8 CLOSED

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.

from tailwindcss.

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:

purifycss/purifycss#147 (comment)

from tailwindcss.

@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!

from tailwindcss.

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).

from tailwindcss.

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.

from tailwindcss.

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>

from tailwindcss.

Consolidate into #136.

from tailwindcss.

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.

Please can you show me how? I cant figure it out, been trying for 6 hours already.

from tailwindcss.