RockFrontend – How to use TailwindCSS and LESS together?

[nurkka]

Today, I got stuck with RockFrontend, LESS and TailwindCSS. I tried several approaches, but couldn't get it to work. I've got the following problem:
I want to use TailwindCSS and LESS together, i.e. be able to use TailwindCSS classes within LESS with e.g. .myclass { &:extend(.text-center); }. Also, I would like to use for example @apply font-serif; within LESS.

It seems that this doesn't work, because Tailwind and LESS are separated in RockFrontend, and do not know about each other.

My hope was to get rid of npm build scripts, although I know that RockFrontend is also using a npm build script behind the scenes.

Is there or would there be a way in the future to integrate TailwindCSS and LESS in a way so they know about each other and can be used together?
Or am I missing something?

[wbmnfktr]

1 hour ago, nurkka said:

Is there or would there be a way in the future to integrate TailwindCSS and LESS in a way so they know about each other and can be used together?

That's not how this works. You can use TailwindCSS and LESS at the same time, but pulling Tailwind into LESS... haven't seen this combo anywhere in the wild.

BUT... you can use the Tailwind's base.css (or however it's called in RockFrontend) and write modern CSS in it. That will work.

/*Tailwind base.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

+ modern CSS:

/*Tailwind + CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

header {
    --brand-clr-main: #111;
    --brand-clr-accent: #f33;
    
    h1 {
        color: (--brand-clr-main);
        @apply text-3xl;

        a {
            text-decoration: none;
            border-bottom: 2px var(--brand-clr-accent) dashed;
            @apply text-orange-500;
        }
    }
}

 

You would skip LESS and rewrite it with native/modern CSS. There are variables, nesting, ... and probably more that makes that switch a bit easier.

[nurkka]

Thanks @wbmnfktr !

Yes, it would be possible to use modern CSS in RockFrontend's site/templates/_tailwind.css. I am not using CSS with nesting etc. yet, because I often had isses with clients with some old devices, so I am getting a bit conservative over time regarding bleeding edge technology 🙂 Perhaps I should reconsider that ... But I also like the possibility of merging my dozens of css/scss/less files together into one single file for production, and this keeps me using preprocessors still.

I used TailwindCSS together with SCSS some time ago in a project, where it worked like I described it. I.e. I could use TailwindCSS classes within my SCSS files and also @apply e.g. fonts I defined in tailwind.config.js. In the meantime, I looked into that old project again and found that one cannot use @extend (or &:extend() in LESS), but has to use @apply to extend custom classes with TailwindCSS classes.

https://tailwindcss.com/docs/using-with-preprocessors
The trick is, to integrate LESS with PostCSS. In RockFrontend, TailwindCSS is compiled via a npm script and LESS is compiled via a PHP library.
So, the question is, how could that be combined?

Perhaps I'll find the time to have a closer look at that. For the time being, I copied my font definitons and some other stuff from tailwind.config.js over to my LESS files and will just use TailwindCSS's utility classes within the LATTE files.

[bernhard]

Hey @nurkka I'd second what @wbmnfktr said and recommend switching to modern css as much as possible. Or course it always depends on the situation and use case, but in general I think modern CSS is much more powerful.

For example I've developed a website for a client where we have 3 different business units which have their own color (blue/green/yellow). This is called the "primary-color". Using css variables it is possible to switch colors easily across sections, so example.com/boats is blue example.com/outdorr is green and example.com/sunsails is yellow.

So all I do is adding this:

html {
  --col-primary: #ff0000;
}

Then I can use var(--col-primary) in my css and all colors will be changed.

Using CSS variables instead of LESS has many benefits, for example:

• It will work with only one CSS file. The color will be set in the HTML. Using LESS you can only set @col-primary to ONE value. That means you'd have to create main-blue.css, main-green.css and main-yellow.css
• Using CSS variables it is even possible to set different colors for different sections on the page. For example on the frontpage we can show blog posts from all sections and depending on the section they belong to we can set a different color. But all cards will use the same CSS. All you have to do is this:

<h2>Blog posts boats</h2>
<div style='--col-primary: blue'> ... </div>

<h2>Blog posts outdoor</h2>
<div style='--col-primary: green'> ... </div>

<h2>Blog posts sunsails</h2>
<div style='--col-primary: yellow'> ... </div>

This is very powerful and not possible in LESS/SCSS.

I'm still using LESS for convenience, for example for RockPageBuilder it is still nice to have, because I can "namespace/scope" css via nesting, so that added css does not mess with global css defined somewhere else.