Can I use tailwind functions/directives in stylers components?

[molleweide]

Hi there,

Great work with this project. This is awesome!

I am a beginner looking to learn rust and my question is: If I use tailwind, can I use its functions and directives in my rust style components with stylers?

With react and styled components I would do it like this:

const StyledButton = styled.button`
  // add tailwind classes here
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  // ... my own styles
  // ...
`;

function Button() {
  return <StyledButton />
}

[abishekatp]

Unfortunately I have very limited knowledge about tailwind css. As of now I can assure that if you set up the tailwind css setup separately, then style macro will work fine and generate separate main.css file. Then you can include both of these generated css files separately in the index.html file. In future we may try weather we can integrate tailwind css with stylers. If you have some idea please share here we can work on it.

[molleweide]

Allright thanks! Yes, I will definitely come back here if I find some relevant info :)

[dezren39]

it's probably out of scope with this directly. it'd be nice if there was something which handled this that you could integrate as a cargo feature. but any of these features are useful to tailwind users and can sometimes be found implemented, so i'll go over what i wish existed. people do all sorts of fancy things with postcss etc, but focusing on core tailwind functionality without mentioning javascript.

tailwind is a set of utility classes and properties that can be reused in many projects, a sort of standard library for css. it runs in full mode, generates multiple megabytes with all css from the "@" imports you provide, and then has a binary you can use which scans your code and generates a release mode version with only the specific lines you need, kilobytes. ( heres a 10m video with some tips for tailwind users https://www.youtube.com/watch?v=aSlK3GhRuXA )

so with tailwind, rust needs a crate that handles things each as optional feature such as

• embed tailwind with the project, handle the download, either javascript or binary version
• accept tailwind version input or allow system tailwind
• accept tailwind config file or otherwise generate a sane default for a rust/javascript project
• accept a 'main' css file to point tailwind at in compile time or otherwise generate the common default that is in every single tailwind example template.
• tailwind runs in 2 modes, minified and not
  • if release, run minified
  • minified means it uses the tailwind config to scan your code, it needs to know where to find the css classes and if it's not a plain string in a file it might need custom javascript parsing instructions
  • if not release
  • run not minified
  • cache the result of this tailwind build and dont rerun if that main css doesnt change
  • each of these generate an output file, provide a macro to insert the style in the index tell people to do it, if they don't, do a search for index.html maybe else panic?
• there is an ecosystem around auto alpha-sorting tailwind classes etc etc, don't need to worry about that tailwind engine can care about that if it's needed within tailwind ecosystem later. (tailwind oxide)
• there is a need for compile-time checking of tailwind classes. it's the idea behind https://crates.io/crates/tailwindcss-to-rust among other attempts, including completely rewriting tailwind in rust. the thing with linked crate is that tailwind people get an eye for seeing literally the weird mash of class names you might know as 'oh thats a tailwind thing'. so really we need a string check, inside any classes fields, that all class references are valid tailwind classes, valid custom tailwind class, or a custom class created by this project. maybe after building all css files, on release builds where tailwind minified release version is generated, gather a list of all the classes/properties or whatever from the tailwind file generated, any other prelude css files user provided, then iterate over each component and ask 'are any of these not in the list'?

[abishekatp]

Hi @dezren39 thank you for putting your thoughts here. As for as I know I am not sure how we can integrate tailwind css with this library. This library focuses on compile time scoped css for Leptos component.

I think there is already someway of integrating tailwind css to the Leptos framework. If you post message on Leptos discard channel or in the Leptos repository you will get a guidance for achieving the same. Please let me know if I can help you in some way.