0

so I was trying out tailwindcss with leptos framework, what I noticed is when classes are included in static class attribute, the tailwindcss config recognize and build up those in output.css. however if I was to include class name using Dynamic Classes in leptos framework, those classes are not being auto included in output.css. Eg. 'rounded-lg' style won't be included in output.css

use leptos::*;
use leptos_meta::*;

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (count, set_count) = create_signal(cx, 0);
    provide_meta_context(cx);

    view! { cx,
        <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
        <button
            class="p-1 px-2.5 bg-sky-500 hover:bg-sky-700 focus:outline-none focus:ring focus:ring-sky-300 hover:text-white"
            class:rounded-lg=move || count() % 2 == 1
            on:click=move |_| {
                set_count.update(|n| *n += 1);
            }
        >
        "Click me: " {move || count()}
        </button>
    }
}

fn main() {
    leptos::mount_to_body(|cx| view!{ cx, <App/> })
}

I had to manually add those styles to output.css, wondering if there is better way to auto extract that rather than adding it manually all the time.

Ferin Patel
  • 13
  • 2
  • by dynamic you mean runtime defined css classes? It does not work with tailwind. There are workarounds but tailwind is not built for runtime. https://tailwindcss.com/docs/content-configuration#dynamic-class-names Otherwise could you elaborate what the line "class:rounded-lg=move || count() % 2 ==" actually does? – Ricardo Silva Apr 29 '23 at 14:24
  • ya, that's what I meant, runtime defined classes – Ferin Patel Apr 30 '23 at 01:47
  • If you add spaces around `rounded-lg` will be that valid syntax for leptos? eg `class: rounded-lg =move || count() % 2 == 1` – Ihar Aliakseyenka Apr 30 '23 at 11:46
  • interesting.. spacing did the trick.. if i have a space after the colon, it picked up that class.. strange.. hmm thanx, wish i could vote u up .. yikes !! :) also do u know why adding a number it complains its a invalid tag.. example if i add rounded-2xl then leptos complain its a invalid tag name or attribute key – Ferin Patel May 02 '23 at 03:22
  • @FerinPatel The problem here is [exctraction](https://tailwindcss.com/docs/content-configuration#customizing-extraction-logic) logic - Tailwind reads code as text and extract its utilities according to regex - every word divided by quotes, spaces, some other symbols. In your case it considers `class:rounded-lg=move` as one utility. You need to customize extraction logic to a new regex which should include both `:` and `=` signs. This will break variants so you need to change [separator](https://tailwindcss.com/docs/configuration#separator) too. Or just add spaces around utility to match regex – Ihar Aliakseyenka May 02 '23 at 09:32
  • @FerinPatel don't know why leptos (this is not my stack) considers its invalid tag - I guess it has numbers in it. I would recommend not to use Tailwind utilities in dynamic classes - Tailwind may have a lot of "not allowed symbols" (`/` in labels, `[]` in dynamic utilites, numbers etc) you may have to change and it will bring more pain than solve problems. Use [layers](https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply) or don't use Tailwind and leptos together. Had similar issue once with Pug and I'm not using them together since – Ihar Aliakseyenka May 02 '23 at 09:36
  • thanx.. ya layers approach seem viable option.. its just a experimental project as I'm learning leptos.. leptos is new framework and seems promising, however it doesn't yet support any css out of the box. It just happens that tailwinds utility first approach fits well with this framework rather than anything else when it comes to styling components. But thanx for your advice makes sense. :) – Ferin Patel May 02 '23 at 14:43

1 Answers1

0

You could try using the Safelisting classes tailwind.config.js option.

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: [
    'rounded-lg'
  ],
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
}
Check out this example I created here with that config setting. https://play.tailwindcss.com/Bpz8xH6Edk?file=config

Even though there is no HTML being output, the rounded-lg class still gets included into the compiled CSS.

Tailwind Play example of Safelisting classes.

There is another option which is shown under Working with third party libraries.

@tailwind base;
@tailwind components;

.c-rounded-lg {
  @apply rounded-lg;
}

/* ... */

@tailwind utilities;

This will ensure that Tailwind always includes those styles in your CSS, which is a lot easier than configuring Tailwind to scan the source code of a third-party library.

We recommend writing those styles without using Tailwind’s @layer feature

treckstar
  • 1,956
  • 5
  • 21
  • 26
  • i guess prolly i didn't explain it right or my question is misleading. leptos framework allows to add dynamic class, i believe trunk bundles up everything on compilation. so not sure if tailwind is responsible to make bundle.css output file or some other tooling.. but its not picking up tailwind classes that are defined as leptos dynamic class – Ferin Patel May 02 '23 at 03:12
  • Sure understandable, that is also why I included the Working with third party libraries bit as Leptos is technically a third party working with Tailwind. Seems you have a working solution for your class though, which is great news. – treckstar May 02 '23 at 10:31