curious: what about applying classes in devtools?

[ghost]

First of all excellent effort! 🎉 only I know how many times my PC hanged/stopped working when working in devtools 🔥 . JIT is blazing fast 🚀 .

Now the new issue is, I miss the ability to apply classes on the fly in devtools. Was wondering if you guys having something related to this in your genius minds?

For now I'm just anticipating & adding a comment similar to this /* overflow-hidden overflow-auto */ to generate the classes temporarily. It's tedious.

Maybe a special comment syntax like this /* tailwind-generate flex overflow[responsive] */ to generate all flex & overflow responsive related classes temporarily would be nice. I don't know. what's your plan?

[tauzN]

https://twitter.com/adamwathan/status/1371519846391934976

[minusf]

it would be nice to have this discussion here not on twitter...

[tauzN]

Sorry for linking to an answer to the question, I guess.

[minusf]

that's a comment for the tailwind team but you are free to take it personally 🤷‍♂️ ...
shocking it might be, not everyone uses twitter for technical discussions

[tauzN]

Again, I am sorry for contributing to the discussion. My mistake.

[ghost]

Nothing to be sorry about. Anything that's helpful to the discussion in welcomed. Thanks for the link.

[adamwathan]

Hey thank you so much for the kind words! 😍

Yeah this is a tricky one and just kinda one of the trade-offs that comes with this approach. I've thought a little bit about somehow pregenerating a subset of styles to get the best of both worlds in development but it's very difficult to know what to generate. Do you generate every utility, but just not the variant versions? Since I expect most people aren't typing md:overflow-hidden in dev tools but instead just tinkering with the raw utilities like overflow-hidden? Or is someone inevitably going to want the variant versions too, at which point now we are just generating everything all over again and we lose all of the benefits of the approach.

I'm going to close just because no immediate plans to action this but it's not something I am totally dismissing either. For now it's just something we need to accept as a trade-off. In the mean time I would suggest trying to build a habit of making your changes in your text editor with a live reload/HMR setup in place instead and see if that's actually all you need.

[ghost]

Yes, I also think generating for each variant would be too much granular. I used the [responsive] as an example. But figuring out what to pregenerate for everyone's use case could be hard & could easily go up to at-least 1mb file size of most common utilities.

Letting people choose what to pregenerate temporarily with a little comment would be a great feature I think. Like flex generate all the flex related utilities including most common variants, ring generate all the ring related utilities and grid do similar, you get the idea. And I also think generating based on corePlugins would still be too much.

And I use live reload/HMR already as I mostly use react or vue.

Btw thanks for your attention. Hope you come up with something soon.

[minusf]

Yeah this is a tricky one and just kinda one of the trade-offs that comes with this approach.

I find this trade-off interesting because one of the biggest selling points of tailwind was not to context switch between html and css files, and use a limited DSL instead of pure css.

This new modus operandi now introduces such a context switch between the browser and the editor to do the "quick" prototyping -- which now becomes "writing pure css" that needs to be translated back into tailwind's DSL: the circle is complete.

Maybe a browser extension is the way forward?

[ghost]

Maybe a browser extension is the way forward?

I'm not sure. It might be a good idea. I don't have much experience with building extensions, still I'm thinking of giving it a shot and see if it's feasible.