1.4 - Tailwind - First look

[Araminta]

Tune in live next Thursday for a first look at our Tailwind integration

Let the countdown to 1.4 begin 🫨

https://www.youtube.com/watch?v=8lkY0qM7vJ0
Thu. 25 Jan
6pm CET

[iamkeef]

YES YES YES!!! So excited

[Marius]

Finally, thanks to its integration and components, a framework makes sense to me in WP.
Waited like forever for something like that, so I’m pretty excited too

[Xonbu.com]

Looking forward to it

[T-low]

Bump

Quite excited

Cheers

[Hank]

Saw the Tailwind video on YouTube.
A phenomenal choice of introducing a popular and widely used CSS framework like Tailwind within a Wordpress page-builder, the ecosystem surrounding it, and the implementation is super slick. Kudos.

[pomilo]

wow ! i don’t have words except than wow wow wow ! i’m looking forwards for 1.4 and i have a new site to build so i’ll wait for monday to start this one

congrats Cwicly team, i love you !

[Marius]

This is exceptional and goes far beyond any personal expectations.
The overall impression for me is an even more streamlined workflow.
It takes away so many Tailwind and general class building/management pain points.

Here are my first points which needs to be addressed imo:

• The added TW classes require consistency/organization. This was also mentioned in the live. With TW, one easily has added 20-30 classes to a block in an instant and this would be quite chaotic, nicely expressed. I’m also concerned about pushing the Primary/Design/Advanced tab too far down due to the amount (and partly length) of classes. Not sure if that could become an issue and if so, how to solve it
• Quick access to property editing is huge! Is it possible to direct the user to its specific area, not to the general one? Clicking a box-shadow class sent Louis to the Borders tab, instead of Borders > Shadows. Seems like it’s the current general behaviour

There are some more questions open to me, but I’ll include that (if still relevant) with my initial feedback as soon as I have the opportunity to get my hands on.

---

I was always a huge fan of Tailwaind’s core concept but didn’t see it ever to become useful in some way inside a builder.
When TW for Cwicly was announced, my interest was quite moderate. I could see the benefit in combination with components though.
Now, I’m seriously considering making a full switch to Tailwind. At least I will have a hard time deciding against it. It’s just too powerful. Of course, this first impression might change.

[hopscotch]

I had developed with Bootstrap for years then shifted over to Tailwind. The biggest difference is Mobile first design flow (that was an adjustment to say the least) and all those classes. The shell concept is an excellent management option to litigate all those classes.

This utility class framework you will adapt to quickly and become accustomed to looking through the classes for your styling without having to drill down into the UI as often.

I don’t know if this is a feature, but the option to turn ‘off’ and ‘on’ TW classes without deleting them from the block would be very functional. Like you can with relative styling.

[Marius]

@hopscotch

I don’t know if this is a feature, but the option to turn ‘off’ and ‘on’ TW classes without deleting them from the block would be very functional. Like you can with relative styling.

You can do that by clicking the class, just like you would do with a virtual class.

[hopscotch]

@Marius Oh I see lovely! Thank you for the link

[bayustudio]

Congratulations cwicly team.
Impressive implementation of tailwind.

Im aware that Tailwind has huge ecosystem and highly popular amongst developer outside wordpress (eg:just check at state of css 2023 data).

Once this feature ready and stable, you definitely have to use the momentum to promoting it
Many developers may not yet realize the possibility of having WordPress + Webflow-like builder + Tailwind, now all in one solid package.

[derekpadula]

I’ve never used Tailwind before, but this has got me interested in taking a course on it. Given that it will be a native part of Cwicly, a lot of other people in my position might do the same. If Tailwind can help people make websites faster, with more efficient code, and better designs that improve the user experience, then it’ll be worth the effort to learn.

[adrianf]

This is pure GOLD. Something I have only been dreaming of for many years. Now to dig out my LTD!

[izzy]

This is a really exciting time. The execution of the tailwind integration looks incredible and seems a lot more elegant than the likes of Pinegrow (which is still a great product!).

I predominantly build fully custom themes using Roots Sage and Bedrock, but am now going to be using Cwicly to execute the vast majority of new builds from now on.

I can’t wait to start using it. A huge thanks and congrats to Louis and the whole Cwicly team, you are creating THE solution for an advanced visual builder for WordPress. I can’t express how impressed and grateful I am with what you’ve done so far, and what is on the horizon.

[hopscotch]

@izzy I worked with Pinegrow as well before finding Cwicly. Unfortunately I ran into too many obstacles (with Pinegrow) and it didn’t suit me. Cwicly and the engagement of the dev team are particularly refreshing. The Tailwind integration is quite an accomplishment to say the least.

[izzy]

@hopscotch 100% agree with you on how amazing the engagement is from the Cwicly team. I don’t know where they find the time being such a small team managing the dev, documentation, videos, admin, support, community engagement etc. They are all super talented and hard working.

[T-low]

Hi there,
here some thoughts from me.

First a super BIG thank you to the Cwicly team for your work and for this update.

I really appreciate the Tailwind integration because, as mentioned several times, it greatly reduces the number of classes that need to be named. In my case, I am testing a new, simple website setup and have not created a single additional class so far.

Since class cluttering was already a big topic before the tailwind integration, I personally wouldn’t mind an additional button to toggle the block classes on and off. As in the example below, a simple button pushes the UI down quite a bit and I for one don’t feel the need to constantly check all classes. Unless I again missed to check an option

I would also prefer a somewhat sorted order of the classes. For example, the hover state is in the middle of all classes. Which doesn’t exactly make it easy to distinguish between the classes.

An alternative could be to highlight the classes that are currently active, or highlight only the specific classes in the current state, as shown below for hover.

And again, unless I missed it, I would like to be able to copy classes to another block. As far as I know, this is partially possible with shells. But what if I only want to edit that one element and not the shell? So I’m not sure if I’m looking for the ability to unpack the classes of a shell again.

Well, that’s it for now, I’m having fun playing around with the new update.

Cheers

[Marius]

Hey @T-low.

I think most of your points have already been covered here, thanks for adding your thoughts too, confirming the necessity.
It would probably the best idea to create dedicated Feature Requests for it.

@Marius

Yeah, a Feature Requests would be great to check if other users see a need for it too.
Although this is on the list already, as Louis mentioned in the live when addressing the topic.

A discussion on how classes could be organized in the UI, and how that transfers to the front-end, since it’s quite important for readability as well, would be beneficial.
Another crucial point, as you mentioned, is how to avoid large class lists pushing down the options/design panel.

Collecting some ideas would be great.

---

@T-low

And again, unless I missed it, I would like to be able to copy classes to another block. As far as I know, this is partially possible with shells. But what if I only want to edit that one element and not the shell? So I’m not sure if I’m looking for the ability to unpack the classes of a shell again.

There is a quite powerful context (right-click) menu, which should fulfil your requirements of copying and pasting.