Tailwind 3.x project - No classes

Hello all, I wanted to try a new project from scratch using Tailwind 3.x. I Created the new project file as Tailwind CSS 3.x. index. The problem is I don’t see any class to assign to elements.

But if I start a project using Tailwind 2.x, then I can see the TW classes.

Any idea?

Thanks

So I had to load a Tailwind component and then delete it ( because I don’t need it) in oder to have have the classes in the “add classes to body” window.

@red-rosefields - Look closely, do you now see ALL of the available TW3 classes? Or only a subset of the ones that were being used by the temporary component? I believe it to be the latter. I have already suggested the same intuitive behavior for the colors too as posted here.

I too am a Tailwind developer, and have previously voiced my frustrations with the lack of true Tailwind support. The current implementation is half-baked at best. But once you figure out all of the workarounds, and get all of the hacks in place, it can be pretty usable. It’s just not easy, and takes a lot of trial, error and patience.

1 Like

@red-rosefields , @PwrSrg

There is a major difference between TW2 and TW3 projects as for the latter, it is, as they state in the V3 feature description, “Just in Time all the time” whereas - at least in Pinegrow - with TW2, the entire CSS file is loaded.

Look at the header of each project template in Pinegrow:
V2

V3

Simplistic explanation to get to the point: It is “normal” that classes are not visible anymore because as long as they are not used, for optimization purposes they “do not exist” in your project.

Conclusion: the experience between your use of TW2 and TW3 will surely be different in Pinegrow.

For advanced needs with Tailwind 3, we recommend reading this documentation which will allow you to customize your installation as you wish: Using the external build process | Pinegrow Web Editor

Pinegrow doesn’t claim to “visually” integrate all the hundreds (thousands?) of TailwindCSS options, but to offer the best possible compromise for a comfortable and efficient TailwindCSS experience.

Experienced TailwindCSS users who want/expect:

true Tailwind support

may not like it and will probably want to go further (see Using the external build process | Pinegrow Web Editor). Maybe they will even prefer to do without Pinegrow and use a classic editor.

Others, through the classic mode or the use of the Design panel and Class Styles will find it an efficient way to create quality designs thanks to the power and ease of use of TailwindCSS in Pinegrow :slight_smile:

Hi @Emmanuel,

As always, thank you for the detailed info. But I believe you are still not seeing the bigger picture, and remain stuck on functionality over usability. I am well aware of the major differences between v2 and v3, as I have been using v3 since beta. And at no point have I ever suggested loading the entire TW3 CSS library, but I feel that that is how you continue to read it.

Attempting to use ALL 46K+ TW3 utility classes (v2 had 37,080) would be insanity, not to mention completely defeat the purpose of the JIT engine.

BUT…

Expecting your users to MEMORIZE all 46K+ TW3 utility classes is ALSO insanity, which is why practically every other IDE in existence still shows them to you (IntelliSense / auto-completion) even if you aren’t USING them. Or as you put it, “do not exist”. I know, CrAzY right? How can they possibly do that?? It must be the devil’s magic. :smiling_imp::magic_wand:

So, kidding aside, just because we would like to SEE the classes that are available to us (as I described in detail a few months ago) doesn’t mean we want to USE them all. It simply means that we are not all savant gods with immeasurable memory. (as much as I would love for that to be the case) :upside_down_face:

And to your explanation of why this basic (standard?) functionality doesn’t work for v3, I guess I would be asking myself - SHOULD that be the “normal” for my product? Or should my product be smarter than that? :thinking: But then again, it’s not my product.

Here is a great example of the devil’s magic in action - https://devtoolsfortailwind.com

I really hope this clears things up a bit! And as always, I’m not trying to be HARD on you guys! I’m just trying to get a little love for us NON-WordDepressed users. :sunglasses:

@PwrSrg

I would be less sarcastic than you in responding that TailwindCSS evolves regularly and that we try to be very reactive in supporting each version; However, sometimes, and this is the case with V3 the structural evolutions are a bit more advanced than a simple file update and we have to make choices between the speed of a “standard” release for our users (while integrating as well as possible the most significant novelties) or a more complete but also more complex integration requiring technical upheavals in Pinegrow and which would take several development cycles, TailwindCSS (like WordPress or Bootstrap) not being the only feature of our application: )

As always, as I already pointed out to you in the previous discussion you quoted, we try to do our best to satisfy all our customers and it is absolutely not excluded that this feature will be improved in Pinegrow in the near future in order to at least have an equivalent of what we offer with version 2.

3 Likes

Thanks @Emmanuel, that would be amazing. We always look forward to new updates! :+1:t3:

1 Like