Tailwind not working for changing text color and weight

[ArturAssisComp]

Problem

Tailwind is not working properly for dioxus project. Basically, it changes the size and the alignment of the text, but not the color nor the weight.

Steps To Reproduce

1. Create a dioxus project: dx new bug
2. Choose the following options: jumpstart (template) > false (fullstack) > true (router) > true (tailwind) > web (platform)
3. Follow the steps to configure and install tailwind (some of the steps does not work, for example, npx tailwindcss init does not work, but it is not necessary if you already have chosen the true option to use the tailwing during the creation of the project):
4. Install tailwing cli: npm install tailwindcss @tailwindcss/cli
5. Go to the home component (src/views/home.rs) and update the content to:

use dioxus::prelude::*;

/// The Home page component that will be rendered when the current route is `[Route::Home]`
#[component]
pub fn Home() -> Element {
    rsx! {
        h1 { class: "text-[120px] font-bold text-center text-red-500", "Hello world!" }
        div { class: "text-[120px] font-bold  text-red-500", "Hello world!" }
        div { class: "text-[120px]   text-red-500", "Hello world!" }
    }
}

6. Delete all the style for assets/styling/main.css
7. Run the tailwind compiler: npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
8. Run the dx dev server: dx serve
9. Open the page being served using an edge browser
10. Finally, see the following result (no red color neither bold)

Expected behavior

The text should be red and the first div should be bold.

Important Files

• assets/styling/tailwind.css

/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
@layer properties;
.visible {
  visibility: visible;
}
.relative {
  position: relative;
}
.block {
  display: block;
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.text-center {
  text-align: center;
}
.text-\[120px\] {
  font-size: 120px;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
    }
  }
}

• input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "all",
  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• package.json

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.4",
    "tailwindcss": "^4.1.4"
  }
}

Environment:

• Dioxus version: dioxus 0.6.3 (fc1f1c2)
• Rust version: rustc 1.85.0 (4d91de4e4 2025-02-17)
• OS info: Windows 11 (x86_64)
• App platform: web
• IDE: VS Code

Questionnaire

I'm interested in fixing this myself but don't know where to start.

[LeWimbes]

This is related to the transition from TailwindCSS 3 to TailwindCSS 4. Your example works fine with TailwindCSS 3. If you want to use TailwindCSS 4, you'll need to delete the tailwind.config.js file and change the input.css to contain only @import "tailwindcss";.

Hope this helps :)
I think the templates should be updated for TailwindCSS 4 with Dioxus 0.7.

I found in the CLI README.md that the templates are cloned from this repo: https://github.com/DioxusLabs/dioxus-template. So if you are interested in working on it yourself, you might want to take a look there. For testing you might want to change this line and install Dioxus CLI from source with that change.

[ArturAssisComp]

Thanks for your help. Already created the PR that solves that issue: DioxusLabs/dioxus-template#68 (comment)

[jkelleyrtp]

We now migrated to Tailwindv4 and inlined it in the CLI, so I think this issue is resolved!