diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3877b44..1f7a1ae 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -28,7 +28,7 @@
   "scripts": {
     "build:types": "tsc -p tsconfig.build.json",
     "build:js": "tsup",
-    "build:css": "tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify && node scripts/strip-layers.js",
+    "build:css": "tailwindcss -i src/styles/global.css -o dist/tailwind.css --minify",
     "build": "pnpm build:css && pnpm build:js && pnpm build:types",
     "dev": "concurrently \"tailwindcss -i src/styles/global.css -o dist/tailwind.css --watch\" \"NODE_ENV=development tsup --watch\"",
     "test": "vitest run --project unit",
diff --git a/packages/ui/scripts/strip-layers.js b/packages/ui/scripts/strip-layers.js
deleted file mode 100644
index 3f50a9e..0000000
--- a/packages/ui/scripts/strip-layers.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { readFileSync, writeFileSync } from 'fs';
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const cssPath = resolve(__dirname, '../dist/tailwind.css');
-
-let css = readFileSync(cssPath, 'utf-8');
-
-function stripLayers(input) {
-  let result = '';
-  let i = 0;
-
-  while (i < input.length) {
-    const emptyLayerMatch = input.slice(i).match(/^@layer\s+[\w-]+\s*;/);
-    if (emptyLayerMatch) {
-      i += emptyLayerMatch[0].length;
-      continue;
-    }
-
-    const layerMatch = input.slice(i).match(/^@layer\s+[\w-]+\s*\{/);
-    if (layerMatch) {
-      i += layerMatch[0].length;
-      let braceCount = 1;
-      let content = '';
-
-      while (i < input.length && braceCount > 0) {
-        if (input[i] === '{') braceCount++;
-        else if (input[i] === '}') braceCount--;
-
-        if (braceCount > 0) content += input[i];
-        i++;
-      }
-
-      result += content;
-    } else {
-      result += input[i];
-      i++;
-    }
-  }
-
-  return result;
-}
-
-css = stripLayers(css);
-
-writeFileSync(cssPath, css, 'utf-8');
-console.log('Stripped @layer wrappers from CSS');
diff --git a/packages/ui/src/styles/global.css b/packages/ui/src/styles/global.css
index 606e4e2..f3d74b1 100644
--- a/packages/ui/src/styles/global.css
+++ b/packages/ui/src/styles/global.css
@@ -1,5 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+Pro:wght@400;700&display=swap');
-@import 'tailwindcss' prefix(yv); /* The CSS linter error is a known issue and does not affect functionality */
+/* Importing Tailwind this way opts us out of CSS layers (reasoning: https://github.com/tailwindlabs/tailwindcss/discussions/13188#discussion-6352337) */
+@import 'tailwindcss/theme.css' prefix(yv); /* The CSS linter error is a known issue and does not affect functionality */
+@import 'tailwindcss/preflight.css' prefix(yv);
+@import 'tailwindcss/utilities.css' prefix(yv);
 @import 'tw-animate-css';
 @import './bible-reader.css';
 
@@ -120,7 +123,7 @@
     --yv-red-dark-mode: oklch(0.64 0.22 15);
     --yv-warm-neutral: oklch(0.25 0.005 20);
     --yv-warm-neutral-dm: oklch(0.96 0.005 20);
-  
+
     --yv-background: var(--yv-gray-50);
     --yv-foreground: var(--yv-white);
     --yv-card: var(--yv-gray-45);