{"id":11714,"date":"2025-09-04T21:37:24","date_gmt":"2025-09-04T21:37:24","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=11714"},"modified":"2025-09-04T21:37:24","modified_gmt":"2025-09-04T21:37:24","slug":"tailwindcss-with-yew","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/tailwindcss-with-yew\/","title":{"rendered":"TailwindCSS with Yew"},"content":{"rendered":"<p>We&#8217;ve looked at using Yew with Rust in my post <a href=\"https:\/\/putridparrot.com\/blog\/wasm-with-rust-and-yew\/\" target=\"_blank\">WASM with Rust (and Yew)<\/a>, let&#8217;s take things a step further by adding TailwindCSS with Yew.<\/p>\n<ul>\n<li>Install the <a href=\"https:\/\/tailwindcss.com\/docs\/installation\/tailwind-cli\" target=\"_blank\">tailwind-cli<\/a><\/li>\n<li>In your root folder run\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpm init \r\n<\/pre>\n<p>just select defaults for to get things started\n<\/li>\n<li>Now let&#8217;s install tailwindcss using\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpm install --save-dev tailwindcss\r\n<\/pre>\n<\/li>\n<li>Ensure tailwindcss cli is installed to your package using\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpm install tailwindcss @tailwindcss\/cli\r\n<\/pre>\n<\/li>\n<li>You can actually remove pretty much everything from the package.json file, mine looks like this\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n{\r\n  &quot;dependencies&quot;: {\r\n    &quot;@tailwindcss\/cli&quot;: &quot;^4.1.12&quot;\r\n  }\r\n}\r\n<\/pre>\n<\/li>\n<li>Create a styles folder and place the tailwind.css file into it<\/li>\n<li>Change the tailwind.config.js to look like this\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\/** @type {import(&#039;tailwindcss&#039;).Config} *\/\r\nmodule.exports = {\r\n    content: &#x5B;\r\n        &quot;.\/index.html&quot;,\r\n        &quot;.\/src\/**\/*.rs&quot;\r\n    ],\r\n    theme: {\r\n        extend: {},\r\n    },\r\n    plugins: &#x5B;],\r\n}\r\n<\/pre>\n<\/li>\n<\/ul>\n<p><strong>Using Tailwindcss<\/strong><\/p>\n<p>We&#8217;re going to want to use the tailwindcss CLI to generate our application&#8217;s .css file into the .\/dist folder otherwise our application will not be able to use it, but we&#8217;ll leave that step until a little later. For now let&#8217;s start by manually running the CLI to generate our .css file, which we&#8217;ll store in our root application folder. <\/p>\n<p>Run the following command from the terminal<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpx @tailwindcss\/cli -i .\/styles\/tailwind.css -o .\/app.css\r\n<\/pre>\n<p>This generates an app.css file, but actually it&#8217;s not a lot of use at this point, however you can take a look at what&#8217;s generated by tailwindcss CLI in this app.css file.<\/p>\n<p>What we really want to do is, as part of the build, is generate the file and then reference it from our application.<\/p>\n<p>As we&#8217;re using <em>trunk<\/em> from our previous posts, we can use the trunk hooks to generate the file. I&#8217;m running on Windows so will use powershell to run the command. Open the Trunk.toml file (I&#8217;ll include my whole file below) and add the [[hooks]] section where we will create a pre-build step that generates the app.css in the application root as we did manually<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n&#x5B;serve]\r\naddress = &quot;127.0.0.1&quot;\r\nport = 8080\r\n\r\n&#x5B;&#x5B;hooks]]\r\nstage = &quot;pre_build&quot;\r\ncommand = &quot;powershell&quot;\r\ncommand_arguments = &#x5B;&quot;-Command&quot;, &quot;npx&quot; , &quot;@tailwindcss\/cli -i .\/styles\/tailwind.css -o .\/app.css&quot;]\r\n<\/pre>\n<p>However, as mentioned already we need this file in the .\/dist folder. Copying the file is no use as we need to link to the file in our index.html file. <\/p>\n<p>We do this by creating the link to our app.css but marking it so that <em>trunk<\/em> will generate the file in the .\/dist folder for us. Here&#8217;s the index.html<\/p>\n<pre class=\"brush: plain; highlight: [7]; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot; \/&gt;\r\n    &lt;title&gt;My WASM App&lt;\/title&gt;\r\n    &lt;link data-trunk rel=&quot;sass&quot; href=&quot;index.scss&quot; \/&gt;\r\n    &lt;link data-trunk rel=&quot;css&quot; href=&quot;app.css&quot; \/&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Note the use of <em>data-trunk<\/em> for both our app.css but also the default created index.scss.<\/p>\n<p><strong>Using the TailwindCSS in our code<\/strong><\/p>\n<p>We&#8217;ve now got the .css file generated as part of the <em>trunk<\/em> build and the file copied to .\/dist so now we can use the CSS classes in our code, so here&#8217;s an example of a simply layout<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nuse yew::prelude::*;\r\n\r\n#&#x5B;function_component(Layout)]\r\npub fn counter() -&gt; Html {\r\n  html! {\r\n    &lt;div class=&quot;min-h-screen w-screen flex flex-col&quot;&gt;\r\n      &lt;nav class=&quot;bg-red-800 text-white px-6 py-4 flex justify-between items-center&quot;&gt;\r\n        &lt;div class=&quot;text-base font-semibold&quot;&gt;{ &quot;My Application&quot;  }&lt;\/div&gt;\r\n        &lt;ul class=&quot;flex space-x-6&quot;&gt;\r\n          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-gray-300 text-base&quot;&gt;{&quot;Home&quot;}&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-gray-300 text-base&quot;&gt;{&quot;About&quot;}&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;hover:text-gray-300 text-base&quot;&gt;{&quot;Services&quot;}&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=&quot;\/counter&quot; class=&quot;hover:text-gray-300 text-base&quot;&gt;{&quot;Counter&quot;}&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n     &lt;\/nav&gt;\r\n     &lt;main class=&quot;flex-grow bg-gray-100 p-6&quot;&gt;\r\n       &lt;p class=&quot;text-gray-700&quot;&gt;{&quot;Content foes here&quot;}&lt;\/p&gt;\r\n     &lt;\/main&gt;\r\n   &lt;\/div&gt;\r\n  }\r\n}\r\n<\/pre>\n<p>Here&#8217;s an example of the counter code<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nuse yew::prelude::*;\r\n\r\n#&#x5B;function_component(Counter)]\r\npub fn counter() -&gt; Html {\r\n    let counter = use_state(|| 0);\r\n    let on_add_click = {\r\n        let c = counter.clone();\r\n        move |_| { c.set(*c + 1); }\r\n    };\r\n\r\n    let on_subtract_click = {\r\n        let c = counter.clone();\r\n        move |_| { c.set(*c - 1); }\r\n    };\r\n\r\n    html! {\r\n        &lt;div&gt;\r\n            &lt;button onclick={on_add_click}\r\n                style=&quot;width: 100px;&quot;\r\n                class=&quot;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded&quot;&gt;\r\n                    { &quot;+1&quot; }&lt;\/button&gt;\r\n            &lt;p style=&quot;text-align: center&quot;&gt;{ *counter }&lt;\/p&gt;\r\n            &lt;button onclick={on_subtract_click}\r\n                style=&quot;width: 100px;&quot;\r\n                class=&quot;bg-emerald-500 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded&quot;&gt;\r\n                    { &quot;-1&quot; }&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve looked at using Yew with Rust in my post WASM with Rust (and Yew), let&#8217;s take things a step further by adding TailwindCSS with Yew. Install the tailwind-cli In your root folder run npm init just select defaults for to get things started Now let&#8217;s install tailwindcss using npm install &#8211;save-dev tailwindcss Ensure tailwindcss [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[191,748],"tags":[],"class_list":["post-11714","post","type-post","status-publish","format-standard","hentry","category-rust","category-wasm"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=11714"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11714\/revisions"}],"predecessor-version":[{"id":11796,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/11714\/revisions\/11796"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=11714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=11714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=11714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}