My first look at Cwicly/Tailwind: I miss global styling

[yankiara]

Hi all!

I finally found a bit of time to test Tailwind in Cwicly, and though I find its implementation very well done, I still have a hard time knowing if this kind of utility first (-only?) is really suited for me. If I can completely switch, or if I need to mix it with some other concept to achieve what I need (and how), or if I have to forget it at the moment.

What I really like is:

• The visual feedback of the TW classes, be it in Cwicly’s inspector or HTML code. (But I have not yet tested on a real life project, so the multiplication of classes and duplication might annoy me in the end… Time could tell!)
• The consistency of standardized classes that allow sharing elements with simple HTML copy/paste (or “stealing” from any TW website for inspiration or starting point).
• The community, templates, bridges with Figma and I guess many other tools.
• Adopting some industry standard and learning a new workflow, which can’t hurt
• Cwicly in charge of everything in the background (like purge)!

What I don’t like:

• The inability (well, it seems, but prove me wrong) to define global styles or to apply styles to third party elements or programatically (for instance to style my form plugin buttons like other buttons or use global classes/variables in code blocks).
• The multitude of values to choose from for a property instead of more semantic values (that I personally set through CSS variables and utility classes in my own framework), which could lead to inconsistency within the same site.

I understand that Cwicly components remove the need for global styles in a lot of cases, that Cwicly shells can solve other usecases, but it seems to me that gaps remain.

So I’ll share here 3 fundamental requests that I couldn’t achieve, to see if I’m just missing something or if I’m just not TW-compatible, or if I have to wait for updates.

1- Global style base elements

How do I use the Cwicly’s global styles tab in TW context?
If TW philosophy is utility-only, then how can I define global styles for sections or typography?
Do I have to use apply?

2- Unifying all buttons sitewide, including:

• Cwicly buttons (be it native button or wrapped in a component),
• Wordpress buttons (for the client to use in its articles for instance),
• form plugins buttons,
• PHP-coded links/buttons in code blocks (custom queries or actually any code).

In my own system, I have some custom CSS applied to .cc-btn, .my-form-button, .wp-button, etc, and I can style anything with it. And I have some .btn-outline, .btn-brand, .btn-dark, etc, if I need variations.

How can I do that with Cwicly/Tailwind, please?
Again, do I have to look into the apply thing?

3- Limit property values to a custom semantic set

For instance, I only want 5 custom font sizes or spaces based on CSS variables.
(Knowing that I can later use random custom values anyway if I need it, either with TW class or Cwicly class styling.)

Do I have to change TW configuration in Cwicly?
But is it really TW philosophy?
And if I do this, can I set some fallback values/classes when sharing components with others who don’t have my configuration so that it can render pretty good anyway?

CONCLUSION

Well, you see, I’m just a total newbie with TW, and I couldn’t find my answers in Cwicly’s videos or @Louis’s great lives.
Obviously this update is a first step towards some more refined and complete system, but I would like to understand if I can jump in or stay with my workflow.

I would love to be convinced and get rid of my framework (or at least a large part), simplify my workflow, have more consistency in all my work, easily share snippets with others, and leave all the work to Cwicly and Tailwind

Thanks in advance and congrats to the team for this awesome piece of work, like always.

[yankiara]

OK, so I have a partial but very usable and clean answer to point #3 by @owynter.

However, all this config change makes me think that we lose the consistency and universality of Tailwind, especially when sharing components between sites or users.

So, what about the ability to specify fallback standard values that could be used if the custom CSS variables don’t exist on the target site?
For instance, I paste my HTML here on the forum, someone gets it and pastes it in his own site but, as he doesn’t have my config variables, the fallback values are used.

Another nifty trick is used in Figma to code plugin, with ROUNDS custom values to standard Tailwind values when exporting.

The reverse mechanism would be awesome when pasting into Cwicly
Cwicly would round the standard values to your closest custom values, et voilà!!!

SOrry, these are only thoughts… Just exploring to check if TW fits my needs.

[T-low]

Hi @yankiara,

to the whole global approach I’d be really interested to hear what the Cwicly team thinks and if @Louis could show how he creates a sample section with tailwind and with a global approach. As of the 1.4 life it seems like components are the way to go, but a demo would be really nice

So for a pure component aproach this might be interesting: Component Default Styles Option
This is also important for the convenient use of a pure component approach: Component Advanced View/Edit Mode

@yankiara

However, all this config change makes me think that we lose the consistency and universality of Tailwind, especially when sharing components between sites or users.

As for your comment, I’ve watched a few Youtube videos and a really often heard tip is to keep the standards of the Tailwind classes to ensure compatibility between sites and potentially other users/teams. So I agree with you, but this is also from the point of view of a TW beginner.

Cheers

[qiang814k]

yes, me too, i guess here it is the place , but
for exacmple, how to set a global default padding to a cwicly section by tailwind.

[JulianM]

Feel free to visit the TW documentation…

No seriously, there is no clear path to follow there, you might better stick to mozilla dev documentation

or start all over again for TW sake…

[JulianM]

@T-low

As for your comment, I’ve watched a few Youtube videos and a really often heard tip is to keep the standards of the Tailwind classes to ensure compatibility between sites and potentially other users/teams. So I agree with you, but this is also from the point of view of a TW beginner.

It still seems to be required for consistency to add your values here, this are type of configurations I’m looking for but it seems more digging and set up needed, no clue how to manage fluid typography, plugins…

@yankiara

However, all this config change makes me think that we lose the consistency and universality of Tailwind, especially when sharing components between sites or users.

I found many issues just pasting components in terms size, position…
It seems the config set up its a must but it is required to start clean with your globals, so it seems at the end you go with TW or not at all because the mixing doesn’t seem to go along with global configurations.

Here is a way to manually configure TW I guess we can set the same values to use whether TW is active or not and get the desired results but i have not test it yet.

Translating a Custom Design System to Tailwind CSS

[yankiara]

Thanks a lot!
This guy convinced me at 99% that Tailwind is NOT FOR ME

Manually setting classes for heading font-size or color? Including for different breakpoints?
This must be a joke… or I’m totally missing the point.
Call me old-school CSS freak but how can this help consistency and how can TW be industry standard?
Or maybe TW users just copy/paste templates, fix a few things manually, and then never touch the site again?

I want my global styling back

[StrangeTech]

@JulianM

no clue how to manage fluid typography, plugins…

@Louis demoed this in the recent first look along with the Typography options. It only takes a minute to add to the TW configuration:

https://www.youtube.com/live/8lkY0qM7vJ0?t=5999

[JulianM]

@StrangeTech

@Louis demoed this in the recent first look along with the Typography options. It only takes a minute to add to the TW configuration:

https://www.youtube.com/live/8lkY0qM7vJ0?t=5999

Well cool!, prose… wow it doesn’t show how to modify the values globally or customize them to your needs, which off course will take more than a minute. besides I’m not the only one who is kind of lost about the TW thing, I guess I will dig into that first look but I don’t think it replaces an actual tutorial or a proper breakdown of things do you?

[yankiara]

I’ve tested the tailwind/utopia tool and it’s very easy to customize, like you would do in SCSS/CSS file, no worries for that

[JulianM]

Well its supposed to work from cwicly globals - typography unless you have some variables stylesheet of your own as far as I know but the TW integration is not that seamless, @louis have addressed that recently.
I understand that the config file is like my variables file or the globals file that cwicly creates as we set up from the interface to make it consistent from project to project. am I wrong?

[StrangeTech]

@JulianM

wow it doesn’t show how to modify the values globally or customize them to your needs, which off course will take more than a minute.

Yep, it’s a quick demo as a starting point, the docs probably will help with more advanced customisations.

@JulianM

I don’t think it replaces an actual tutorial or a proper breakdown of things do you?

As indicated by @Louis, there are many more things that will be included in upcoming releases.

Releasing the Tailwind integration so that anyone familiar with it already and anyone who has time and willingness to learn about it can start using it, subsequently sharing their experiences, also benefits everyone else who hasn’t learned it yet.

@JulianM

besides I’m not the only one who is kind of lost about the TW thing

The activity on the discourse and the upcoming enhancements will likely help all of us “fill in the gaps”.

I have often observed that being lost is just a step towards finding what you are looking for and awareness of it indicates being on the verge of further progress.