Exploring the next phase of Tailwind with Global Styles

[StrangeTech]

@equitieslab

Does that mean that you can’t use style elements that are not in tailwind, if you use tailwind as well?

You may find this post interesting:

Cwicly / Tailwind breakpoint differences

OK, so at this stage, you seem to have two choices: Use the original Cwicly class based approach and avoid Tailwind Use Tailwind fully and reset your breakpoints to the Tailwind defaults If you choose to use Tailwind, it may be beneficial to reset the Cwicly breakpoints to the Tailwind defaults: [Screenshot 2024-02-21 at 03.02.52] This should synchronise Cwicly’s breakpoints with Tailwind’s. There should be 6 in total, including the base. Bear in mind, that depending on what styles …

TLDR: You can use block class styles on some blocks while simultaneously using Tailwind classes on other blocks. You can enable and disable Tailwind mode during development without issue as long as you take care to ensure there are no conflicts between the Tailwind classes and the block classes.

[LauGau]

I see some example here where people add some CSS props on the base layer for theming purpose. I am doing that too, but soon, there will be an even more convenient way to do that :
https://x.com/adamwathan/status/1758967073516945794?s=20

Here is an example of the theme.css file in TW 4:

https://gist.github.com/adamwathan/867ba103c861d244c61d8403072ac9b5

Not sure yet how it will work with the tailwind.config.js but there is definitely something big coming to TW 4 and hopefully Cwicly will be on that train.

Whatever is implemented regarding theming in Cwicly, I hope that it will end up inside a “tailwind.config.js” file or at least in the most “Tailwind way”. Why? Because this assures a maximum compatibility with the TW ecosystem and portability.

[ShannaKae]

So am i missing something or are we missing the grid builder for blocks with the TW integration? I love the grid builder feature but when i click on it with TW settings I only see input options, no visual bilder. I am cool using the CY settings for this for now, but wanted to make sure I am not missing something. I am a visual designer so the imputes are not working well for me. But I am designing with breakpoints right now so i am hopeful that if i do use the CY grid builder that it will work with the TW breakpoints. Thoughts?

[StrangeTech]

@ShannaKae

But I am designing with breakpoints right now so i am hopeful that if i do use the CY grid builder that it will work with the TW breakpoints.

Grid builder works with any breakpoint defined in Cwicly’s breakpoint editor - so yes, even if you had reset to Tailwind defaults within the breakpoint editor, the grid builder will work.

@ShannaKae

So am i missing something or are we missing the grid builder for blocks with the TW integration?

The visual grid builder isn’t currently compatible with Tailwind as far as I know. Tailwind has its own grid classes and methodology, so at the moment, you can just choose from their available options, just like with other style properties.

Please bear in mind that for a specific block, if you manage the grid with block classes or global classes you may not want to mix these with Tailwind grid related classes for that block as it may not be easy to determine where properties are being set or which is taking priority.

[ShannaKae]

Thank you so much Louis, I am really enjoying the TW integration. Can you or anyone else in here recommend a comprehensive video or videos for em to learn the basics of Tailwind and CSS So that I can better understand what is going on here? As a non-coder user, I have been pretty successful so far using Cwicly to achieve some pretty impressive results. Now as i dig deeper into the TW, CSS, Breakpoints, Responsive Design etc… I am realizing that. a deeper understanding of what is happening under the hood is essential for me. I dont want to waist time watching or learning outdated concepts that wont apply to my workflow in Cwicly… and i dont want to learn how to code necessarily, I am a visual designer 100% but i do need to understand css, base, breakpoints, css grids etc… stylesheets, etc. if i want to effectively utilize Cwicly and the ne TW integration. For example, until a few days ago I had never designed with Breakpoints and didn’t even realize that we had “base” styles, which leads me to the realizatino that i need to get a big picture, crash course asap. Any thoughts on training that i can complete quicly like a coule hours or a day or two? Thanks so much. @StrangeTech @Louis @Araminta

[oppi]

What do you wanna achieve, @ShannaKae? Where do you see obstacles? The UI that is given to us pretty much reflects the way we code CSS, it’s just a visual and abstract layer. What are you missing?

[ShannaKae]

Hey Oppi, I was just looking for a good tutorial or high level tutorial series to get me up to speed on a deeper level of how CSS works with HTML, etc… so that I can understand better the tools I am using. I spent the day watching Beginner HTML and CSS Videos by Dave Gray, it was REALLY helpful. I have a much better idea of how things look under the hood now… and things are making. more sense to me! It is challenging for me because I dont have the same coding background as most of you. So I just need to get a better understanding of what is happening under the hood so I can hang with yall LOL. I think i am good now.