diff --git a/packages/elements/package.json b/packages/elements/package.json
index dcefe8664..e6dddd40e 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -63,8 +63,8 @@
     "express": "4.18.2",
     "lit": "3.1.2",
     "mutation-testing-metrics": "3.0.2",
-    "mutation-testing-report-schema": "3.0.2",
     "mutation-testing-real-time": "3.0.2",
+    "mutation-testing-report-schema": "3.0.2",
     "postcss": "8.4.35",
     "prism-svelte": "0.5.0",
     "prismjs": "1.29.0",
diff --git a/packages/elements/postcss.config.js b/packages/elements/postcss.config.js
index 7bd48b05f..08de9f90c 100644
--- a/packages/elements/postcss.config.js
+++ b/packages/elements/postcss.config.js
@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {}, autoprefixer: {} } : {}),
   },
diff --git a/packages/elements/src/components/drawer/drawer.component.scss b/packages/elements/src/components/drawer/drawer.component.css
similarity index 69%
rename from packages/elements/src/components/drawer/drawer.component.scss
rename to packages/elements/src/components/drawer/drawer.component.css
index 86567dcd0..aec42ff1a 100644
--- a/packages/elements/src/components/drawer/drawer.component.scss
+++ b/packages/elements/src/components/drawer/drawer.component.css
@@ -1,10 +1,10 @@
-@import '../../style/globals.scss';
+@import '../../style/globals.css';
 
 :host([mode='closed']) {
   @apply h-0;
 }
 :host([mode='half']) {
-  height: $mte-drawer-height-half-open;
+  height: var(--mte-drawer-height-half-open);
 }
 :host([mode='open']) {
   @apply h-1/2;
diff --git a/packages/elements/src/components/drawer/drawer.component.ts b/packages/elements/src/components/drawer/drawer.component.ts
index bb307f4b3..f3a2a0f55 100644
--- a/packages/elements/src/components/drawer/drawer.component.ts
+++ b/packages/elements/src/components/drawer/drawer.component.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { renderIf } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
 import { renderEmoji } from '../drawer-mutant/util.js';
-import style from './drawer.component.scss?inline';
+import style from './drawer.component.css?inline';
 
 export type DrawerMode = 'open' | 'half' | 'closed';
 export const DRAWER_HALF_OPEN_SIZE = 120;
diff --git a/packages/elements/src/components/file-icon/file-icon.component.ts b/packages/elements/src/components/file-icon/file-icon.component.ts
index 4e586c4a6..0f753057c 100644
--- a/packages/elements/src/components/file-icon/file-icon.component.ts
+++ b/packages/elements/src/components/file-icon/file-icon.component.ts
@@ -1,7 +1,7 @@
 import { LitElement, svg, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { determineLanguage, ProgrammingLanguage } from '../../lib/code-helpers.js';
-import style from './file-icon.scss?inline';
+import style from './file-icon.css?inline';
 import { classMap } from 'lit/directives/class-map.js';
 @customElement('mte-file-icon')
 export class MutationTestReportFileIconComponent extends LitElement {
diff --git a/packages/elements/src/components/file-icon/file-icon.scss b/packages/elements/src/components/file-icon/file-icon.css
similarity index 100%
rename from packages/elements/src/components/file-icon/file-icon.scss
rename to packages/elements/src/components/file-icon/file-icon.css
diff --git a/packages/elements/src/components/file/file.scss b/packages/elements/src/components/file/file.scss
index 8f1abc919..ce5ac828c 100644
--- a/packages/elements/src/components/file/file.scss
+++ b/packages/elements/src/components/file/file.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 
-@import '../../style/code.scss';
+@import '../../style/code.css';
 
 $mutant-themes: (
   'Pending': theme('colors.neutral.400'),
diff --git a/packages/elements/src/components/mutant-view/mutant-view.css b/packages/elements/src/components/mutant-view/mutant-view.css
new file mode 100644
index 000000000..8e62f0b92
--- /dev/null
+++ b/packages/elements/src/components/mutant-view/mutant-view.css
@@ -0,0 +1,4 @@
+main {
+  /* Allow room for a half-open drawer */
+  padding-bottom: var(--mte-drawer-height-half-open);
+}
diff --git a/packages/elements/src/components/mutant-view/mutant-view.scss b/packages/elements/src/components/mutant-view/mutant-view.scss
deleted file mode 100644
index e361a2a7e..000000000
--- a/packages/elements/src/components/mutant-view/mutant-view.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../style/globals.scss';
-main {
-  // Allow room for a half-open drawer
-  padding-bottom: $mte-drawer-height-half-open;
-}
diff --git a/packages/elements/src/components/mutant-view/mutant-view.ts b/packages/elements/src/components/mutant-view/mutant-view.ts
index 848237359..174e84c57 100644
--- a/packages/elements/src/components/mutant-view/mutant-view.ts
+++ b/packages/elements/src/components/mutant-view/mutant-view.ts
@@ -7,7 +7,7 @@ import type { MteCustomEvent } from '../../lib/custom-events.js';
 import { tailwind } from '../../style/index.js';
 import type { DrawerMode } from '../drawer/drawer.component.js';
 import type { Column } from '../metrics-table/metrics-table.component.js';
-import style from './mutant-view.scss?inline';
+import style from './mutant-view.css?inline';
 import { RealTimeElement } from '../real-time-element.js';
 
 @customElement('mte-mutant-view')
diff --git a/packages/elements/src/components/state-filter/state-filter.component.ts b/packages/elements/src/components/state-filter/state-filter.component.ts
index 3079621f0..4b79be355 100644
--- a/packages/elements/src/components/state-filter/state-filter.component.ts
+++ b/packages/elements/src/components/state-filter/state-filter.component.ts
@@ -5,7 +5,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { createCustomEvent } from '../../lib/custom-events.js';
 import { renderIf } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
-import style from './state-filter.scss?inline';
+import style from './state-filter.css?inline';
 import { RealTimeElement } from '../real-time-element.js';
 
 export interface StateFilter<TStatus> {
diff --git a/packages/elements/src/components/state-filter/state-filter.scss b/packages/elements/src/components/state-filter/state-filter.css
similarity index 100%
rename from packages/elements/src/components/state-filter/state-filter.scss
rename to packages/elements/src/components/state-filter/state-filter.css
diff --git a/packages/elements/src/components/test-file/test-file.scss b/packages/elements/src/components/test-file/test-file.scss
index 98a8c7603..c792a51a3 100644
--- a/packages/elements/src/components/test-file/test-file.scss
+++ b/packages/elements/src/components/test-file/test-file.scss
@@ -1,4 +1,4 @@
-@import '../../style/code.scss';
+@import '../../style/code.css';
 
 $test-themes: (
   'Killing': 'fill-green-700',
diff --git a/packages/elements/src/components/test-view/test-view.css b/packages/elements/src/components/test-view/test-view.css
new file mode 100644
index 000000000..8e62f0b92
--- /dev/null
+++ b/packages/elements/src/components/test-view/test-view.css
@@ -0,0 +1,4 @@
+main {
+  /* Allow room for a half-open drawer */
+  padding-bottom: var(--mte-drawer-height-half-open);
+}
diff --git a/packages/elements/src/components/test-view/test-view.scss b/packages/elements/src/components/test-view/test-view.scss
deleted file mode 100644
index e361a2a7e..000000000
--- a/packages/elements/src/components/test-view/test-view.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../style/globals.scss';
-main {
-  // Allow room for a half-open drawer
-  padding-bottom: $mte-drawer-height-half-open;
-}
diff --git a/packages/elements/src/components/test-view/test-view.ts b/packages/elements/src/components/test-view/test-view.ts
index d61ff84ae..605771daa 100644
--- a/packages/elements/src/components/test-view/test-view.ts
+++ b/packages/elements/src/components/test-view/test-view.ts
@@ -7,7 +7,7 @@ import { tailwind } from '../../style/index.js';
 import type { DrawerMode } from '../drawer/drawer.component.js';
 import type { Column } from '../metrics-table/metrics-table.component.js';
 import { RealTimeElement } from '../real-time-element.js';
-import style from './test-view.scss?inline';
+import style from './test-view.css?inline';
 
 @customElement('mte-test-view')
 export class MutationTestReportTestViewComponent extends RealTimeElement {
diff --git a/packages/elements/src/style/code.scss b/packages/elements/src/style/code.css
similarity index 77%
rename from packages/elements/src/style/code.scss
rename to packages/elements/src/style/code.css
index 210abd1c2..47784b179 100644
--- a/packages/elements/src/style/code.scss
+++ b/packages/elements/src/style/code.css
@@ -1,6 +1,6 @@
 #report-code-block {
-  // Don't show scrollbar in code block, the page already scrolls
-  // Also let the popup appear outside the code block boundaries
+  /* Don't show scrollbar in code block, the page already scrolls */
+  /* Also let the popup appear outside the code block boundaries */
   overflow-y: visible;
   overflow-x: auto;
   background: var(--prism-background);
diff --git a/packages/elements/src/style/globals.css b/packages/elements/src/style/globals.css
new file mode 100644
index 000000000..a9d9a2775
--- /dev/null
+++ b/packages/elements/src/style/globals.css
@@ -0,0 +1,5 @@
+/* Global variables loaded in mutation-test-report-app */
+
+:host {
+  --mte-drawer-height-half-open: 120px; /* Leave room for 2 lines of text */
+}
diff --git a/packages/elements/src/style/globals.scss b/packages/elements/src/style/globals.scss
deleted file mode 100644
index 73490beb9..000000000
--- a/packages/elements/src/style/globals.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Global variables loaded in mutation-test-report-app
-
-$mte-drawer-height-half-open: 120px; // Leave room for 2 lines of text
diff --git a/packages/elements/src/style/index.ts b/packages/elements/src/style/index.ts
index d597a54e3..459358125 100644
--- a/packages/elements/src/style/index.ts
+++ b/packages/elements/src/style/index.ts
@@ -1,7 +1,7 @@
 import { unsafeCSS } from 'lit';
 import tailwindCss from './tailwind.css?inline';
-import prismjsCss from './prismjs.scss?inline';
-import globalsCss from './globals.scss?inline';
+import prismjsCss from './prismjs.css?inline';
+import globalsCss from './globals.css?inline';
 import './prism-plugins';
 
 export const tailwind = unsafeCSS(tailwindCss);
diff --git a/packages/elements/src/style/prism-plugins.ts b/packages/elements/src/style/prism-plugins.ts
index f91df8d6e..bd07eee42 100644
--- a/packages/elements/src/style/prism-plugins.ts
+++ b/packages/elements/src/style/prism-plugins.ts
@@ -1,5 +1,4 @@
 import 'prismjs/components/prism-core';
-import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
 // Order is important here! Scala depends on java, which depends on clike
 import 'prismjs/components/prism-clike';
diff --git a/packages/elements/src/style/prismjs.scss b/packages/elements/src/style/prismjs.scss
deleted file mode 100644
index a72f05bf3..000000000
--- a/packages/elements/src/style/prismjs.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './prismjs.css';
-@import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
diff --git a/workspace.code-workspace b/workspace.code-workspace
index 0897dc181..aa7314d6f 100644
--- a/workspace.code-workspace
+++ b/workspace.code-workspace
@@ -66,6 +66,9 @@
       "editor.defaultFormatter": "scalameta.metals",
     },
     "liveServer.settings.multiRootWorkspaceName": "real-time",
+    "files.associations": {
+      "*.css": "tailwindcss",
+    },
   },
   "launch": {
     "version": "0.2.0",