Possiblity to only use postcss function, but not emitting the utiltily classes themselves

[LostKobrakai]

I really like the potential of tailwind regarding transitioning from utility to component-based styles. Therefore I'm wondering if or how it might be possible to prevent certain utility classes to be emitted (potentially only in prod builds) while mostly relying on @apply and other postcss functions of tailwind.

[HellPat]

Maybe it works if you remove the @tailwind utilities; from you css file for production?
Maybe in combination with https://github.com/rezoh/postcss-at-debug ?

The only problem I see is that you cannot remove the empty media-queries rendered be the magic custom utilities at the end of your resulting css.

[adamwathan]

We can definitely get rid of the empty media queries, will look into that today. We considered splitting the library up into multiple packages to make it easier to pull things in separately but it just seemed like too much to manage and worry about when we just wanted to get the first alpha out the door so folks could try it. Still open to exploring it down the road.

[HellPat]

@adamwathan the empty media queries are not a big problem i.m.o. because a minifier would strip them out already.

We considered splitting the library up into multiple packages to make it easier to pull things in separately

Would be nice but I don't think this is mandatory for a 1.0 release.

@LostKobrakai my idea with the @debug does not seem to work, but i think you could simply provide a litte postcss plugin that strips out the utilities for you. e.g. based on annotations or something. I'm also not sure if it's worth the effort because the output can be easily gzipped or even stripped out automatically by uncss or similar plugins.

[LostKobrakai]

I've no urgency for such a feature. I just like the idea of locally developing/prototyping with all utility functions, but having most skipped in prod when the bulk of styles should be packed in components.

[HellPat]

when the bulk of styles should be packed in components

You can use the utilities in production very well and thats the biggest problem with your idea.
This would prevent any utility to be used in production.

What if you have only one special button styled with utilities.
Just leave it like that for production.

Or you have a .twig partial with loads of utility-classes but include your partial many times.
You have no benefit of writing components if you don't use it it more than 1 place.
(And with 1 place I mean, if you change it, you have to change it in more than one place)

So I'd recommend trying https://www.npmjs.com/package/postcss-uncss for your goal.
Or even ignore the few more bytes in your stylesheet (will be my way to handle this)

[adamwathan]

Going to close this now that the media query stuff is handled. We don't have any plans to allow "silently" importing the utilities in the near future, but not opposed to revisiting it eventually. Thanks!