Dioxus Tailwind Components

A simple but highly customizable and efficient cross-platform components library for Dioxus 0.6 based on TailwindCSS 3.

List of available components

Here's a non exhaustive list of all currently available components. They are divided in 3 categories based on their complexity.

Getting started

Public crate

To add thie library to your dioxus project you can just run the following:

cargo add dioxus-tw-components

Then to link your tailwindcss compiler to dioxus tw components you must add this line to your tailwind config file:

// {process.env.HOME} is usually where the .cargo directory is. Should be replaced by the actual path if yours is not in home
`${process.env.HOME}/.cargo/registry/src/**/dioxus-tw-components-[version or *]/src/**/*.{rs,html,css}`

Local crate

To add this library to your dioxus project as a local crate you may add this to your Cargo.toml file:

dioxus-tw-components = { path = "path/to/dioxus-tw-components/directory" }

Then to link your tailwindcss compiler to dioxus tw components you must add this line to your tailwind config file:

"path/to/dioxus-tw-components/directory/src/**/*.{rs,html,css}"

Boostrap the library

To work properly the library should be launched at the begenning of your application:

use dioxus::prelude::*;
use dioxus_tw_components::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        DioxusTwComponentsBootstrap {} // Launches dioxus tw components. Some components may no work without this
        /* Do stuff */
    }
}

Input CSS

Dioxus tw components uses special CSS variable names to style properly. You may add theses to your input.css file before feeding it to tailwindcss.

@import "tailwindcss/base";
@import "tailwindcss/components";

@layer base {
    :root {
        --background: /* HSL color */;
        --foreground: /* HSL color */;
        --primary: /* HSL color */;
        --primary-foreground: /* HSL color */;
        --secondary: /* HSL color */;
        --secondary-foreground: /* HSL color */;
        --accent: /* HSL color */;
        --accent-foreground: /* HSL color */;
        --muted: /* HSL color */;
        --muted-foreground: /* HSL color */;
        --destructive: /* HSL color */;
        --destructive-foreground: /* HSL color */;
        --success: /* HSL color */;
        --success-foreground: /* HSL color */;
        --border: /* HSL color */;
        --input: /* HSL color */;
        --ring: /* HSL color */;
        --global-shadow: /* Shadow data */;
        --global-radius: /* Radius */;
    }
    .dark {
        --background: /* HSL color */;
        --foreground: /* HSL color */;
        --primary: /* HSL color */;
        --primary-foreground: /* HSL color */;
        --secondary: /* HSL color */;
        --secondary-foreground: /* HSL color */;
        --accent: /* HSL color */;
        --accent-foreground: /* HSL color */;
        --border: /* HSL color */;
        --input: /* HSL color */;
        --ring: /* HSL color */;
        --global-shadow: /* Shadow data */;
    }
    .h1 {
        @apply text-4xl font-extrabold md:text-5xl;
    }
    .h2 {
        @apply text-2xl font-bold md:text-4xl;
    }

    .h3 {
        @apply text-2xl font-semibold md:text-3xl;
    }
    .h4 {
        @apply text-xl font-semibold md:text-2xl;
    }
    .h5 {
        @apply text-lg font-semibold md:text-xl;
    }
    .h6 {
        @apply text-base font-semibold md:text-lg;
    }
    .paragraph {
        @apply font-normal text-foreground;
    }
    .span {
        @apply font-normal text-foreground;
    }
    .anchor {
        @apply text-foreground/70 hover:text-foreground transition-colors cursor-pointer;
    }
}

Docsite

Dioxus tw components offers a docsite for you to showcase the components and experiment with them. Additionally you can use it to export custom themes to embed in your own projects.

Disclaimer

This repository contains an experimental component library for Dioxus, derived from our internal work and needs. We are sharing it with the community as-is, so you can explore, adapt, and build upon our work.

Please note:

Not production ready:
- This library is provided for experimental and educational purposes only. It is not designed for production use.
Community-driven evolution:
- We are offering it to the community as a starting point. Feel free to fork, modify, and enhance it in your own repositories.
Limited maintenance commitment:
- We commit to reviewing any pull requests related to bugs, improvements, and component additions until July 2025. After that date, we are not guaranteeing to manage or support any future developments in this library.
No major development planned:
- We do not intend to invest significant further development in this project.
Respecting the official ecosystem:
- Our goal is not to compete with the upcoming official Dioxus component library. We fully support the evolution of the Dioxus ecosystem and see our contribution as complementary and a helping hand.

We hope that this initiative serves as a useful resource and inspiration for your projects!

License

This project is licensed under either the MIT license or the Apache-2 License.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you, shall be licensed as MIT or Apache-2, without any additional terms or conditions.

dioxus-tw-components 0.1.0