diff --git a/assets/styles/fonts.css b/assets/styles/fonts.css
deleted file mode 100644
index e57f76f..0000000
--- a/assets/styles/fonts.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@layer base {
-  @font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("/assets/fonts/inter_variable.woff2") format("woff2");
-  }
-
-  @font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url("/assets/fonts/inter_variable_italic.woff2") format("woff2");
-  }
-}
diff --git a/docker-compose-dev.yaml b/docker-compose-dev.yaml
index b961c2b..3d46d52 100644
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -12,6 +12,7 @@ services:
       - ./Cargo.toml:/srv/app/Cargo.toml
       - ./diesel.toml:/srv/app/diesel.toml
       - ./Dioxus.toml:/srv/app/Dioxus.toml
+      - ./tailwind.css:/srv/app/tailwind.css
     restart: always
     ports: ["8000:8000"]
     depends_on: ["db"]
diff --git a/src/components/app.rs b/src/components/app.rs
index 0a1ce27..85a80de 100644
--- a/src/components/app.rs
+++ b/src/components/app.rs
@@ -7,13 +7,12 @@ use dioxus_i18n::prelude::*;
 use dioxus_i18n::unic_langid::langid;
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
-const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 #[used]
 static FONTS_DIRECTORY: Asset = asset!(
     "/assets/fonts",
     AssetOptions::builder().with_hash_suffix(false)
 );
-const FONTS_CSS: Asset = asset!("/assets/styles/fonts.css");
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 const INPUT_NUMBER_ARROWS_CSS: Asset = asset!("/assets/styles/input_number_arrows.css");
 const INPUT_RANGE_CSS: Asset = asset!("/assets/styles/input_range.css");
 const MANIFEST: Asset = asset!("/assets/manifest.json");
@@ -35,7 +34,6 @@ pub(crate) fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
         document::Stylesheet { href: TAILWIND_CSS }
-        document::Stylesheet { href: FONTS_CSS }
         document::Stylesheet { href: INPUT_NUMBER_ARROWS_CSS }
         document::Stylesheet { href: INPUT_RANGE_CSS }
         document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
diff --git a/tailwind.css b/tailwind.css
index 7e117e1..bb062ba 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -1,2 +1,22 @@
-/* stylelint-disable-next-line import-notation */
 @import "tailwindcss";
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/assets/fonts/inter_variable.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/assets/fonts/inter_variable_italic.woff2") format("woff2");
+}
+
+/* stylelint-disable-next-line */
+@theme {
+  --font-sans: "Inter", "sans";
+}