Anyone working with Tailwind for ConcreteCMS sites?

Hey everyone,

We use Tailwind CSS sometimes when we’re developing Laravel based apps.
Over time I’ve grown to like it more, especially when combined with a component library.

But for building Concrete themes, we’ve either used our own custom Sass, Bootstrap, or combination of both.

I’ve often pondered whether a Tailwind based Concrete theme would be practical to build, or whether it would just be too fiddly to set up and develop. I imagine that lots of classes would need to be targeted from build in blocks, or lots of block overrides created.

Anyone have experience in this regard?

1 Like

I’ve been playing around with it, but haven’t used it on a production website. I’m currently focusing on lighter frameworks like Pico CSS with cleaner HTML. Smaller HTML footprint and smaller framework file size makes for faster load times.

I am attracted to smaller css.

One of the main appeals of Tailwind is that when you go to production, you run a script that determines what classes you’ve used and only includes those. You configure the list of locations where it looks at templates, and finds the classes in those. So you end up with the minimum CSS for your design (at perhaps the expense of slightly bigger HTML).

I do the same for Bootstrap.
I just run PurgeCSS for deployment (with a white-listed classes that are not picked - like those coming from database/javascript). It makes final css size a little more manageable.

I am more annoyed by usage of jquery/vue/moment across block templates. I would rather have framework-agnostic frontend. Also some would call jquery/moment deprecated in year 2024.

Back to topic.
Years ago I tried to make a BEM-like theme.
It worked for a custom code written in php/html (since I had full control over syntax).
But then I had to use page list block.
I would have to change class names to BEM-alike in template which I found counter-productive.
And I didn’t want to have mixed traditional/BEM syntax in code. So I just gave up on the idea.

These days I usually try to not touch template too much (like only adding what is necessary) since it’s easier to spot differences during major core updates.

I don’t see much problems with implementation of any CSS framework, if you are willing to “maintain” block templates (or just don’t care if they are written in different way).
Also Containers are better than Layouts anyway (so it’s easier to make containers with different framework).
Not sure how deeply Bootstrap js is integrated into frontend blocks (though it’s listed as requirementin Bedrock trait).

Yeah, that is an essential step for Tailwind otherwise the full library would be way too big. It works well unless the user is working with unknown/3rd party block types - but it’s impossible to cover everything. I’m not a fan of relying on Bootstrap anymore. And it also adds a lot of CSS classes to the HTML code (like Tailwind) - which reduces readabilty, and slows down browser rending. I guess I’m just picky when it comes to page speed, and always looking to shave off a little extra.