diff --git a/app/app.vue b/app/app.vue
index 5916e3e328..88aa2c0835 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -3,6 +3,9 @@ import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
+import 'uno.css'
+import('uno:icons.css') // make icon css a separate, async chunk
+
 const route = useRoute()
 const router = useRouter()
 const { locale, locales } = useI18n()
diff --git a/app/assets/main.css b/app/assets/main.css
index 8897b7da18..f679583ada 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -1,3 +1,5 @@
+@layer properties, theme, base, icons, typography, shortcuts, default;
+
 /* Base reset and defaults */
 *,
 *::before,
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index b2237012b5..2c2d1c587d 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
+import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
 import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
diff --git a/knip.ts b/knip.ts
index a08df176b9..048d5cc821 100644
--- a/knip.ts
+++ b/knip.ts
@@ -36,6 +36,10 @@ const config: KnipConfig = {
         '@e18e/eslint-plugin',
         'eslint-plugin-regexp',
 
+        /** Virtual Modules */
+        'uno.css',
+        'uno',
+
         /** Used in test/e2e/helpers/ which is excluded from knip project scope */
         'h3-next',
       ],
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3a4c167ece..1a6d509279 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -55,6 +55,12 @@ export default defineNuxtConfig({
     },
   },
 
+  unocss: {
+    // Storybook doesn't mount app.vue (where `uno.css` is imported),
+    // so disable this property only in non-storybook environments.
+    autoImport: isStorybook,
+  },
+
   devtools: { enabled: true },
 
   devServer: {
diff --git a/uno.config.ts b/uno.config.ts
index 501dc4ac9a..d48a3215ce 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -26,7 +26,6 @@ export default defineConfig({
     presetWind4(),
     presetIcons({
       extraProperties: {
-        'display': 'inline-block',
         'forced-color-adjust': 'preserve-parent-color',
       },
       warn: true,
@@ -39,6 +38,7 @@ export default defineConfig({
     // keep this preset last
     ...(process.env.CI ? [] : [presetRtl(), presetA11y()]),
   ].filter(Boolean),
+  outputToCssLayers: true,
   transformers: [transformerDirectives(), transformerVariantGroup()],
   theme: {
     spacing: { DEFAULT: '4px' },
diff --git a/vitest.config.ts b/vitest.config.ts
index 794f176d83..ce42ec8168 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -42,6 +42,11 @@ export default defineConfig({
                   pwaAssets: { disabled: true },
                 },
                 ogImage: { enabled: false },
+                unocss: {
+                  // app.vue (which imports 'uno.css') is stubbed out by
+                  // @nuxt/test-utils, leaving utility classes missing.
+                  autoImport: true,
+                },
               },
             },
           },