Tailwind CSS only generating some classes in Yew app

Question

I've been trying include tailwind css into a simple Rust wasm frontend using the yew framework serving the app with trunk.

I installed tailwind v3.4.1 using npm as per the instructions here.

My tailwind config is:

module.exports = {
    content: [
        "src/**/*.rs",
        "index.html"
    ],
    presets: [],
    darkMode: 'media', // or 'class'
    theme: {
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

My application is a single rust file:

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    html! {
        <div class="d-flex flex-column">
            <div class="h-[50%] bg-purple-600">{"Row 1"}</div>
            <div class="bg-green-600 text-purple-900">{"Row 2"}</div>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

In the index.html I've included the following tag:

<link data-trunk rel="tailwind-css" href="src/tailwind.css"/>

And the contents of the linked src/tailwind.css file:

@config "../tailwind.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

When I serve my application via trunk serve it generates the css in my dist directory however this compiled css file only includes the h-[50%] class definition and none of the other classes.

.h-\[50\%\] {
  height: 50%
}

I think my setup is fine for incorporating tailwind with trunk and rust/yew and is a problem with my tailwind configuration. Any help solving this would be appreciated.

Answer 1

Consider removing the presets key in the Tailwind configuration.

As per the documentation, having a presets property set to an empty array value disables inheritance of the default Tailwind configuration, meaning no values exist for any dynamically-registered utility classes. This means that the default colors purple.600, green.600 and purple.900 that have tried to use via bg-purple-600, bg-green-600 and text-purple-900 respectively do not exist in the resolved Tailwind configuration.

Furthermore, d-flex and flex-column are not Tailwind classes either. You may have meant flex and flex-col respectively.