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.
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.