diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index b80c2ec..35eb1dd 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -2,6 +2,5 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
-    <mapping directory="$PROJECT_DIR$/portfolio" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 9437e09..4aa975a 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,10 @@ Simply run the following command to install it:
 cargo install trunk wasm-bindgen-cli
 ```
 
+```bash
+npm i -g tailwindcss
+```
+
 That's it, we're done!
 
 ### Running
@@ -55,7 +59,7 @@ There are a few things you have to adjust when adopting this template.
 ### Remove example code
 
 The code in [src/main.rs](src/main.rs) specific to the example is limited to only the `view` method.
-There is, however, a fair bit of Sass in [index.scss](index.scss) you can remove.
+There is, however, a fair bit of Sass in [index.scss](index.css) you can remove.
 
 ### Update metadata
 
diff --git a/Trunk.toml b/Trunk.toml
new file mode 100644
index 0000000..7c7a3fe
--- /dev/null
+++ b/Trunk.toml
@@ -0,0 +1,8 @@
+[build]
+target = "index.html"
+dist = "dist"
+
+[[hooks]]
+stage = "build"
+command = "sh"
+command_arguments = ["-c", "npx tailwindcss -i index.css -o $TRUNK_STAGING_DIR/tailwind.css --minify"]
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/index.html b/index.html
index 4d13cf1..91114d2 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>Trunk Template</title>
-    <link data-trunk rel="sass" href="index.scss" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="stylesheet" href="/tailwind.css"/>
+    <base data-trunk-public-url/>
   </head>
 </html>
diff --git a/index.scss b/index.scss
deleted file mode 100644
index 710545f..0000000
--- a/index.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
-
-body {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  background: linear-gradient(to bottom right, #444444, #009a5b);
-  font-size: 1.5rem;
-}
-
-main {
-  color: #fff6d5;
-  font-family: sans-serif;
-  text-align: center;
-}
-
-.logo {
-  height: 20em;
-}
-
-.heart:after {
-  content: "❤️";
-
-  font-size: 1.75em;
-}
-
-h1 + .subtitle {
-  display: block;
-  margin-top: -1em;
-}
diff --git a/src/app.rs b/src/app.rs
index ab70eb7..6b1c39b 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -3,11 +3,6 @@ use yew::prelude::*;
 #[function_component(App)]
 pub fn app() -> Html {
     html! {
-        <main>
-            <img class="logo" src="https://yew.rs/img/logo.png" alt="Yew logo" />
-            <h1>{ "Hello World!!" }</h1>
-            <span class="subtitle">{ "from Yew with " }<i class="heart" /></span>
-            <super::components::Test></super::components::Test>
-        </main>
+        <super::components::Test></super::components::Test>
     }
 }
diff --git a/src/components/test.rs b/src/components/test.rs
index 5d26414..9054246 100644
--- a/src/components/test.rs
+++ b/src/components/test.rs
@@ -3,7 +3,7 @@ use yew::{function_component, Html, html};
 #[function_component]
 pub fn Test() -> Html {
     html! {
-        <div>
+        <div class="bg-red-500">
             <h1>{"Test component"}</h1>
         </div>
     }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c2355e2
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.rs', './index.html'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
