I saw in an issue that in Dioxus.toml, [web.resource.style] is **deprecated**. I can't find this in documentation.

[anandkkpr]

Overview of my confusion

I saw in an issue that in Dioxus.toml, [web.resource.style] is deprecated. I can't find this in the Dioxus Configuration Documentation. I tried digging a bit into the code in the main branch but I'm too much of a noobie to Rust to figure things out in a reasonable amount of time. Side note: here's the official documentation for Building User Interfaces > Styling - it too makes no mention of Dioxus.toml > [web.resource.(style|script)] - it explicitly states:

Note that we need to add the generated stylesheet to our app:

Here's the issue that states that Dioxus.toml > [web.resource.style] is deprecated: #3592 (comment)

The thing is, either way, I'm truly baffled by the [web.resource] property in Dioxus.toml. On the surface, it feels self-explanatory but, when I try to use it, it doesn't work the way I expect.

Expectations

Given:

Dioxus.toml >
    [application.tailwind_input] = "src/styles/styles.css"
    [application.tailwind_output] = "assets/styles/styles.css"

in conjunction with

Dioxus.toml >
    [web.resource.style] = "assets/styles/styles.css"

I would expect that setting the Dioxus.toml > [web.resource.style] property would negate the need for declaring the following in a Component:

# /src/main.rs

# ...SNIP!...
rsx! (
    Stylesheet { href: asset!("/assets/styles/styles.css") }
)
# ...SNIP!...

Project Structure

Here's a sample dir structure:

PROJECT-ROOT
|-- assets
|   `-- styles
|       `-- styles.css # <- this is the COMPILED CSS generated by Dioxus
|-- src
|   |-- styles
|   |   |-- mypage.css
|   |   `-- styles.css
|   `-- main.rs
|-- ssl
|   |-- cert.pem
|   `-- key.pem
|-- Cargo.lock
|-- Cargo.toml
|-- Dioxus.toml
|-- README.md
|-- clippy.toml
|-- package.json
`-- yarn.lock

Here is my Dioxus.toml file:

[application]

tailwind_input = "src/styles/styles.css"
tailwind_output = "assets/styles/styles.css"

[web.app]

# HTML title tag content
title = "Initial Project for Getting Started with Dioxus"

[web.watcher]
reload_html = true
watch_path = ["src", "public", "assets"]

# include `assets` in web platform

[web.resource]
# **WHY DOESN'T THIS WORK?**
style = ["/assets/styles/styles.css"]

# Additional JavaScript files
script = []

[web.resource.dev]
# JavaScript code file
# serve: [dev-server] only
script = []

Conclusion

I'm pretty sure that I am misunderstanding the nature of Dioxus.toml > [web.resource.(style|script)]. After spending 2 days trying to figure out why my styles.css (the stylesheet I intend to be the primary entrypoint) wasn't loading, it was just by chance that I came across this guide: https://dioxuslabs.com/learn/0.7/guides/utilities/tailwind/ - which does not mention Dioxus.toml at all: instead, it specifies that stylesheets must be declared within the Component definition... which really does make sense in a React sort of way - and, is what I'm guessing is the project maintainers' intent.

I'm opening this discussion because I want to be absolutely sure about two things:

Question 1

Is Dioxus.toml > [web.resource.(style|script)] deprecated?

Question 2

If not, what is it supposed to be used for and...

How is it supposed to be used?

Thank you for any/all assistance!

[ealmloff]

Yes, asset! + Stylesheet is the new way to include styles

[anandkkpr]

@ealmloff - thank you for your quick reply!!!

Before marking your answer as the accepted answer, I needed to ask a related question:

I've encountered a related issue with code organisation. In order to keep styling out of *.rs files and in related *.css files, I want to have the following sort of dir structure:

|-- src
|   |-- layouts # <= all "Layout" components would reside in in here
|   |   `-- landing-pages.rs # <= this would be a layout unique to "Landing Pages" like the "Home" page
|   |   `-- landing-pages.css
|   |   `-- articles.rs # <= this would be a layout for the Article Content Type
|   |   `-- articles.css
|   |   `-- services.rs # <= this would be a layout for the Services Content Type
|   |   `-- services.css
|   |-- pages # <= all "Page" components would reside in a dir-structure
|   |                                    that reflects the info-hierarchy of the project within this dir.
|   |   `-- home # <= this is the Home page (i.e. `Route = /`)
|   |       `-- index.css # <= this is ONLY styling related to the Home Page
|   |       `-- index.rs
|   |   `-- articles # <= this is the Articles landing-page (i.e. `Route = /articles`)
|   |       `-- index.css # <= this is ONLY styling related to the Articles Landing Page
|   |       `-- index.rs
|   |       `-- my-awesome-first-article # <= an example of an individual Article Page
|   |           `-- index.rs # <= the "My Awesome First Article" Article Page
|   |           `-- index.css # <= any special styling needed for this individual Article
|   |-- _tailwind.css # <= This is the `tailwind_input` file, set in `Dioxus.toml > [application.tailwind_input]`
|   |-- _base.css # <= This is the `tailwind_ouput` file, set in `Dioxus.toml > [application.tailwind_output]`
|   `-- main.rs # <= Using this to compose the application, using it for Application level concerns only.

Given the project structure described above, I have set up the bare minimum and, just to test things out as I start, I have the following code in PROJECT-ROOT/src/main.rs:

// ...SNIP!... ^

static MAIN_CSS: Asset = asset!("./_base.css");
static HOMEPAGE_CSS: Asset = asset!("./pages/home/index.css");

fn main() {
    launch(App);
}

#[component]
fn App() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        // !! IMPORTANT NOTE !!:
        //      Must manually declare all stylesheets that need to be injected into any given Route
        //      manually. ONLY THEN will `dx build|serve` add those into the compliled project.
        // @SEE: https://dioxuslabs.com/learn/0.7/guides/utilities/tailwind/
        // The Stylesheet component inserts a style link into the head of the document
        Stylesheet { href: MAIN_CSS }
        Stylesheet { href: HOMEPAGE_CSS }

        h1 { class: "page-heading", "My spanking new website!" }
        p { class: "button-container",
            "The count currently is: {count}"

            div { class: "buttons",
                button { onclick: move |_| count += 1, "Count Up" }
                button { onclick: move |_| count -= 1, "Count Down" }
            }
        }
    }
}

In the rendered web page AND the PROJECT-ROOT/target/dx/project-name/debug/web/public/assets folder, i see the CSS files have been generated correctly and are being loaded in the HTML of the web page in my browser.

The problem is that TailwindCSS is not parsing the Home Page's CSS file. The file is being rendered to the following:

@import "tailwindcss";@import "daisyui";@source "./**/*.{rs,html,css}";@apply bg-black text-white mx-auto p-20;@apply text-3xl font-bold;@apply flex flex-col;@apply flex flex-row gap-2 mt-2;@apply px-8 py-2 bg-amber-200 rounded-md text-black text-shadow-2xs shadow-2xl cursor-pointer;

It's not being compiled.

What's going wrong? Thank you for any help you can give!

[anandkkpr]

UPDATE!: I think I've found the issue - Dioxus' TailwindCSS utility doesn't expect there to be more than one CSS file to parse/transpile. The current code is here:

dioxus/packages/cli/src/tailwind.rs

Line 143 in d312ef8

let mut cmd = Command::new(binary_path);

I'm guessing that, if I want to continue with the modular CSS structure in CSS files and NOT "inline Tailwind" within rsx() Elements, that I'd need to run the TailwindCSS CLI transpiler myself, providing it with instructions on which directories to watch.

Side note - for a tiny bit of context: I want to have TailwindCSS autocompletions in my IDE and my IDE is Jetbrains RustRover. The autocompletions don't seem to be working in *.rs > rsx!() macros. A clear and easy way to both, keep the business logic + markup structure clean and free from Tailwind's run-on utility CSS is to use @apply in modular CSS files, only providing components a component-level ID and/or Class identifier and then targetting that within those said modular CSS files. There is relatd documenttaion here: https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned - but this documentation doesn't indicate where the transpiled CSS file will go.

I come from a Sassy/SCSS background (years ago) and I sort of expected that a transpiler like TailwindCSS CLI will have the ability to generate a transpiled CSS file in place - perhaps something like:

- home
  - input.css
  - output.css
  - index.rs

where every index.rs file can use rsx!( Stylesheet { asset!("./output.css") } ) to load the relevant generated CSS file.

Please let me know if I'm on to something here.

Thanks!

[anandkkpr]

UPDATE: I found this discussion directly on TailwindCSS: tailwindlabs/tailwindcss#6612

All said, what I was expecting (at least according to the discussion link I'm referrring to) appears to be an anti-pattern.

In the case of Dioxus, it looks like I've come full circle to the simple setup that is described in the Dioxus documentation: one CSS file is expected to be transpiled and, if you want to keep component-based CSS out of *.rs component files, then you need to use @import in the primary/base CSS file. According to Dioxus, this would be the tailwind.css file that the documentation speaks about - which, as I've mentioned in my original post, can be renamed by using Dioxus.toml > [application.tailwind_(input|output)] values.

I have yet to try this out but it looks like, in this manner, the application will have one CSS file to rule them all. In my specific use case/issue here, I'll ONLY pursue this route further IF my IDE (IntelliJ RustRover) does not provide TailwindCSS auto-completions directly within *.rs > rsx!() macros. As mentioned in the discussion I've pasted in this reply, the primary case for TailwindCSS is the expectation that styling is to be performed inline, directly on HTML elements. So, fingers crossed that RustRover's TailwindCSS Language Server works on rust:html files (as mentioned in the Dioxus TailwindCSS documentation for IDE setup and IntelliJ IDE TailwindCSS setup). That said, I'm not too hopeful that IntelliJ will pick up on TailwindCSS in rsx!() macros.

I'll report back here with what I find tomorrow.

Cheers!

PS: In case anyone else is using RustRover for Dioxus with TailwindCSS, I've opened a Ticket with Jetbrains about the TailwindCSS support for Dioxus/Rust here.