diff --git a/examples/basic/client.tsx b/examples/basic/client.tsx
index a682b603..8918fe24 100644
--- a/examples/basic/client.tsx
+++ b/examples/basic/client.tsx
@@ -1,4 +1,4 @@
 import hydrate from "ultra/hydrate.js";
-import App from "./src/app.tsx";
+import App from "@/app.tsx";
 
 hydrate(document, <App />);
diff --git a/examples/basic/deno.json b/examples/basic/deno.json
index 8080d9f1..7e153f62 100644
--- a/examples/basic/deno.json
+++ b/examples/basic/deno.json
@@ -1,6 +1,6 @@
 {
   "tasks": {
-    "dev": "deno run -A --no-check --watch ./server.tsx",
+    "dev": "ULTRA_MODE=development deno run -A --no-check --watch ./server.tsx",
     "test": "deno test --allow-all",
     "build": "deno run -A ./build.ts",
     "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js"
diff --git a/examples/basic/importMap.json b/examples/basic/importMap.json
index 8e37d5da..11f56a23 100644
--- a/examples/basic/importMap.json
+++ b/examples/basic/importMap.json
@@ -6,6 +6,7 @@
     "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev",
     "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev",
     "ultra/": "https://deno.land/x/ultra@v2.2.4/",
-    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/"
+    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/",
+    "@/": "./src/"
   }
 }
diff --git a/examples/basic/server.tsx b/examples/basic/server.tsx
index ee138397..e190749a 100644
--- a/examples/basic/server.tsx
+++ b/examples/basic/server.tsx
@@ -1,11 +1,9 @@
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
-import App from "./src/app.tsx";
+import App from "@/app.tsx";
 
 const server = await createServer({
-  importMapPath: Deno.env.get("ULTRA_MODE") === "development"
-    ? import.meta.resolve("./importMap.dev.json")
-    : import.meta.resolve("./importMap.json"),
+  importMapPath: import.meta.resolve("./importMap.json"),
   browserEntrypoint: import.meta.resolve("./client.tsx"),
 });
 
diff --git a/examples/basic/src/app.tsx b/examples/basic/src/app.tsx
index 39333fdb..9b7ade63 100644
--- a/examples/basic/src/app.tsx
+++ b/examples/basic/src/app.tsx
@@ -1,5 +1,6 @@
 import useAsset from "ultra/hooks/use-asset.js";
 import useEnv from "ultra/hooks/use-env.js";
+import Button from "@/components/Button.tsx";
 
 export default function App() {
   // Read our environment variable from '.env' or the host environment
@@ -37,6 +38,7 @@ export default function App() {
             customise your routing, data fetching, and styling with popular
             libraries.
           </p>
+          <Button>Button</Button>
         </main>
       </body>
     </html>
diff --git a/examples/basic/src/components/Button.tsx b/examples/basic/src/components/Button.tsx
new file mode 100644
index 00000000..52f77275
--- /dev/null
+++ b/examples/basic/src/components/Button.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type ButtonProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export default function Button(props: ButtonProps) {
+  return <button className="btn" {...props} />;
+}
diff --git a/lib/middleware/compiler.ts b/lib/middleware/compiler.ts
index 79e2bb55..b922a6cd 100644
--- a/lib/middleware/compiler.ts
+++ b/lib/middleware/compiler.ts
@@ -3,6 +3,7 @@ import { ULTRA_COMPILER_PATH } from "../constants.ts";
 import { extname, join, sprintf, toFileUrl } from "../deps.ts";
 import { log } from "../logger.ts";
 import type { CompilerOptions, Context, Next } from "../types.ts";
+import { isCompilerTarget } from "../utils/compiler.ts";
 
 const { transform } = await createCompiler();
 
@@ -26,9 +27,9 @@ export const compiler = (options: CompilerOptions) => {
     const path = !isRemoteSource ? join(root, pathname) : pathname;
     const url = !isRemoteSource ? toFileUrl(path) : new URL(pathname);
 
-    const isCompilerTarget = [".ts", ".tsx", ".js", ".jsx"].includes(extension);
+    const shouldCompile = isCompilerTarget(pathname);
 
-    if (method === "GET" && isCompilerTarget) {
+    if (method === "GET" && shouldCompile) {
       const bytes = await fetch(url).then((response) => response.arrayBuffer());
       let source = new TextDecoder().decode(bytes);
 
diff --git a/lib/stream.ts b/lib/stream.ts
index 758aa266..b4619fed 100644
--- a/lib/stream.ts
+++ b/lib/stream.ts
@@ -6,10 +6,11 @@
  */
 import type { ReactElement } from "react";
 import * as ReactDOMServer from "react-dom/server";
+import { readableStreamFromReader, StringReader } from "./deps.ts";
+import { log } from "./logger.ts";
 import { ImportMap, Mode, RenderedReadableStream } from "./types.ts";
+import { isCompilerTarget } from "./utils/compiler.ts";
 import { nonNullable } from "./utils/non-nullable.ts";
-import { log } from "./logger.ts";
-import { readableStreamFromReader, StringReader } from "./deps.ts";
 
 export function encodeText(input: string) {
   return new TextEncoder().encode(input);
@@ -160,13 +161,20 @@ export function createImportMapInjectionStream(
   log.debug("Stream inject importMap");
   let injected = false;
 
+  function isSpecialPrefix(specifier: string) {
+    return specifier.startsWith("@ultra/") || specifier.startsWith("@/");
+  }
+
   return createHeadInsertionTransformStream(() => {
     if (injected) return Promise.resolve("");
 
     if (mode === "development") {
       importMap.imports = Object.fromEntries(
         Object.entries(importMap.imports).map(([key, value]) => {
-          if (key.startsWith("@ultra/")) {
+          if (
+            value.startsWith("/_ultra/compiler/") === false &&
+            (isSpecialPrefix(key) || isCompilerTarget(value))
+          ) {
             value = value.endsWith("/") ? value.slice(0, -1) : value;
             value = `/_ultra/compiler/${encodeURIComponent(value)}/`;
           }
diff --git a/lib/utils/compiler.ts b/lib/utils/compiler.ts
new file mode 100644
index 00000000..ae72c0a6
--- /dev/null
+++ b/lib/utils/compiler.ts
@@ -0,0 +1,6 @@
+import { extname } from "../deps.ts";
+
+export function isCompilerTarget(path: string) {
+  const extension = extname(path);
+  return [".ts", ".tsx", ".js", ".jsx"].includes(extension);
+}
diff --git a/test/fixture/build.test.ts b/test/fixture/build.test.ts
index 1617d934..40c9832c 100644
--- a/test/fixture/build.test.ts
+++ b/test/fixture/build.test.ts
@@ -27,7 +27,7 @@ Deno.test(
 
     assertEquals(ignoredOutput.size, 0);
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -62,7 +62,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -99,7 +99,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -136,7 +136,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
diff --git a/test/fixture/client.tsx b/test/fixture/client.tsx
index 48175448..e7fe6af8 100644
--- a/test/fixture/client.tsx
+++ b/test/fixture/client.tsx
@@ -1,15 +1,16 @@
-import { cssomSheet } from "twind";
+import { setup } from "@twind/core";
 import hydrate from "ultra/hydrate.js";
-import App from "./src/app.tsx";
-import { TWProvider } from "./src/context/twind.tsx";
-import { TRPCClientProvider } from "./src/trpc/client.tsx";
-import { theme } from "./theme.ts";
+import App from "@/app.tsx";
+import { TRPCClientProvider } from "@/trpc/client.tsx";
+import { sheet } from "@/twind.ts";
+import config from "@/twind.config.js";
+
+//@ts-ignore twind types issue
+setup(config, sheet);
 
 hydrate(
   document,
   <TRPCClientProvider>
-    <TWProvider sheet={cssomSheet()} theme={theme}>
-      <App />
-    </TWProvider>
+    <App />
   </TRPCClientProvider>,
 );
diff --git a/test/fixture/deno.json b/test/fixture/deno.json
index aa7eac9f..860f8614 100644
--- a/test/fixture/deno.json
+++ b/test/fixture/deno.json
@@ -1,9 +1,7 @@
 {
   "lock": false,
   "test": {
-    "files": {
-      "exclude": [".ultra/"]
-    }
+    "exclude": [".ultra/"]
   },
   "tasks": {
     "dev": "deno run -A --no-check --watch ./server.tsx",
diff --git a/test/fixture/importMap.json b/test/fixture/importMap.json
index 45ff082a..2a0b319e 100644
--- a/test/fixture/importMap.json
+++ b/test/fixture/importMap.json
@@ -1,20 +1,22 @@
 {
   "imports": {
-    "react": "https://esm.sh/react@18.2.0?dev",
-    "react/": "https://esm.sh/react@18.2.0&dev/",
-    "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
-    "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
-    "@tanstack/react-query": "https://esm.sh/@tanstack/react-query@4.13.0?external=react",
-    "@tanstack/react-query-devtools": "https://esm.sh/@tanstack/react-query-devtools@4.13.0?external=react,@tanstack/react-query&dev",
-    "@trpc/server": "https://esm.sh/@trpc/server@10.0.0-rc.1",
-    "@trpc/server/": "https://esm.sh/@trpc/server@10.0.0-rc.1/",
-    "@trpc/client": "https://esm.sh/*@trpc/client@10.0.0-rc.1",
-    "@trpc/client/": "https://esm.sh/*@trpc/client@10.0.0-rc.1/",
-    "@trpc/react-query": "https://esm.sh/*@trpc/react-query@10.0.0-rc.1",
+    "react": "https://esm.sh/v125/react@18.2.0?dev",
+    "react/": "https://esm.sh/v125/react@18.2.0&dev/",
+    "react-dom": "https://esm.sh/v125/react-dom@18.2.0?dev",
+    "react-dom/": "https://esm.sh/v125/react-dom@18.2.0&dev/",
+    "@tanstack/react-query": "https://esm.sh/v125/@tanstack/react-query@4.13.0?external=react",
+    "@tanstack/react-query-devtools": "https://esm.sh/v125/@tanstack/react-query-devtools@4.13.0?external=react,@tanstack/react-query&dev",
+    "@trpc/server": "https://esm.sh/v125/@trpc/server@10.0.0-rc.1",
+    "@trpc/server/": "https://esm.sh/v125/@trpc/server@10.0.0-rc.1/",
+    "@trpc/client": "https://esm.sh/v125/*@trpc/client@10.0.0-rc.1",
+    "@trpc/client/": "https://esm.sh/v125/*@trpc/client@10.0.0-rc.1/",
+    "@trpc/react-query": "https://esm.sh/v125/*@trpc/react-query@10.0.0-rc.1",
     "zod": "https://deno.land/x/zod@v3.19.1/mod.ts",
-    "twind": "https://esm.sh/twind@0.16.17",
-    "twind/sheets": "https://esm.sh/twind@0.16.17/sheets",
+    "@twind/core": "https://esm.sh/v125/@twind/core@1.0.1",
+    "@twind/preset-autoprefix": "https://esm.sh/v125/@twind/preset-autoprefix@1.0.1",
+    "@twind/preset-tailwind": "https://esm.sh/v125/*@twind/preset-tailwind@1.0.1",
     "ultra/": "https://denopkg.com/exhibitionist-digital/ultra@main/",
-    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/"
+    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/",
+    "@/": "./src/"
   }
 }
diff --git a/test/fixture/server.no-browser.tsx b/test/fixture/server.no-browser.tsx
index 83f25c61..791cb2a8 100644
--- a/test/fixture/server.no-browser.tsx
+++ b/test/fixture/server.no-browser.tsx
@@ -1,12 +1,12 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
+import { createHeadInsertionTransformStream } from "ultra/stream.ts";
 import App from "./src/app.tsx";
 import { queryClient } from "./src/query-client.tsx";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { appRouter } from "./src/server/router.ts";
 import { TRPCServerProvider } from "./src/trpc/server.tsx";
-import { serverSheet, TWProvider } from "./src/context/twind.tsx";
-import { theme } from "./theme.ts";
+import { stringify, tw } from "./src/twind.ts";
 
 const server = await createServer();
 
@@ -20,7 +20,6 @@ server.all("/api/trpc/:path", (context) => {
 });
 
 server.get("*", async (context) => {
-  const sheet = serverSheet();
   // clear query cache
   queryClient.clear();
 
@@ -29,13 +28,22 @@ server.get("*", async (context) => {
    */
   const result = await server.render(
     <TRPCServerProvider>
-      <TWProvider sheet={sheet} theme={theme}>
-        <App />
-      </TWProvider>
+      <App />
     </TRPCServerProvider>,
   );
 
-  return context.body(result, 200, {
+  // Inject the style tag into the head of the streamed response
+  const stylesInject = createHeadInsertionTransformStream(() => {
+    if (Array.isArray(tw.target)) {
+      return Promise.resolve(stringify(tw.target));
+    }
+
+    throw new Error("Expected tw.target to be an instance of an Array");
+  });
+
+  const transformed = result.pipeThrough(stylesInject);
+
+  return context.body(transformed, 200, {
     "content-type": "text/html; charset=utf-8",
   });
 });
@@ -43,6 +51,8 @@ server.get("*", async (context) => {
 if (import.meta.main) {
   serve(server.fetch, {
     onListen() {
+      // We exit onListen so we know the server started successfully
+      // in our tests
       Deno.exit(0);
     },
   });
diff --git a/test/fixture/server.tsx b/test/fixture/server.tsx
index a1dfa9e3..c0a60abc 100644
--- a/test/fixture/server.tsx
+++ b/test/fixture/server.tsx
@@ -1,12 +1,12 @@
+import App from "@/app.tsx";
+import { queryClient } from "@/query-client.tsx";
+import { appRouter } from "@/server/router.ts";
+import { TRPCServerProvider } from "@/trpc/server.tsx";
+import { stringify, tw } from "@/twind.ts";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
-import App from "./src/app.tsx";
-import { queryClient } from "./src/query-client.tsx";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import { appRouter } from "./src/server/router.ts";
-import { TRPCServerProvider } from "./src/trpc/server.tsx";
-import { serverSheet, TWProvider } from "./src/context/twind.tsx";
-import { theme } from "./theme.ts";
+import { createHeadInsertionTransformStream } from "ultra/stream.ts";
 
 const server = await createServer({
   importMapPath: import.meta.resolve("./importMap.json"),
@@ -23,7 +23,6 @@ server.all("/api/trpc/:path", (context) => {
 });
 
 server.get("*", async (context) => {
-  const sheet = serverSheet();
   // clear query cache
   queryClient.clear();
 
@@ -32,13 +31,22 @@ server.get("*", async (context) => {
    */
   const result = await server.render(
     <TRPCServerProvider>
-      <TWProvider sheet={sheet} theme={theme}>
-        <App />
-      </TWProvider>
+      <App />
     </TRPCServerProvider>,
   );
 
-  return context.body(result, 200, {
+  // Inject the style tag into the head of the streamed response
+  const stylesInject = createHeadInsertionTransformStream(() => {
+    if (Array.isArray(tw.target)) {
+      return Promise.resolve(stringify(tw.target));
+    }
+
+    throw new Error("Expected tw.target to be an instance of an Array");
+  });
+
+  const transformed = result.pipeThrough(stylesInject);
+
+  return context.body(transformed, 200, {
     "content-type": "text/html; charset=utf-8",
   });
 });
diff --git a/test/fixture/src/app.tsx b/test/fixture/src/app.tsx
index 27a0a13f..e7106f9a 100644
--- a/test/fixture/src/app.tsx
+++ b/test/fixture/src/app.tsx
@@ -1,8 +1,8 @@
 import { lazy, Suspense } from "react";
 import useAsset from "ultra/hooks/use-asset.js";
-import Post from "./components/Post.tsx";
+import Post from "@/components/Post.tsx";
 
-const LazyPost = lazy(() => import("./components/Post.tsx"));
+const LazyPost = lazy(() => import("@/components/Post.tsx"));
 
 export default function App() {
   return (
diff --git a/test/fixture/src/components/Post.tsx b/test/fixture/src/components/Post.tsx
index 0ecf2669..2019ad41 100644
--- a/test/fixture/src/components/Post.tsx
+++ b/test/fixture/src/components/Post.tsx
@@ -1,9 +1,8 @@
 import { trpc } from "../trpc/trpc.ts";
-import { useTw } from "../hooks/useTw.ts";
+import { tw } from "../twind.ts";
 
 export default function Post({ id }: { id: number }) {
   const { data } = trpc.post.get.useQuery({ id });
-  const tw = useTw();
   return (
     <div>
       <div className={tw("p-3")}>{data?.title}</div>
diff --git a/test/fixture/src/context/twind.tsx b/test/fixture/src/context/twind.tsx
deleted file mode 100644
index 57575e94..00000000
--- a/test/fixture/src/context/twind.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { type ReactNode } from "react";
-import { create, type Sheet, ThemeConfiguration, type TW } from "twind";
-
-const TWContext = React.createContext<TW | null>(null);
-
-type TWProviderProps = {
-  sheet: Sheet;
-  theme?: ThemeConfiguration;
-  children?: ReactNode;
-};
-
-export function TWProvider({ sheet, theme, children }: TWProviderProps) {
-  const { tw } = create({ sheet, theme, preflight: false });
-  return <TWContext.Provider value={tw}>{children}</TWContext.Provider>;
-}
-
-export function useTwContext() {
-  const context = React.useContext(TWContext);
-  if (!context) {
-    throw new Error("No TWProvider found");
-  }
-  return context;
-}
-
-export const serverSheet = (target = new Set<string>()) => {
-  return {
-    target,
-    insert: (rule: string) => {
-      target.add(rule);
-    },
-  };
-};
diff --git a/test/fixture/src/hooks/useTw.ts b/test/fixture/src/hooks/useTw.ts
deleted file mode 100644
index 16bf6427..00000000
--- a/test/fixture/src/hooks/useTw.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type Token } from "twind";
-import { useTwContext } from "../context/twind.tsx";
-
-export function useTw() {
-  const context = useTwContext();
-  return function tw(tokens?: Token | Token[]) {
-    return context(tokens);
-  };
-}
diff --git a/test/fixture/src/twind.config.js b/test/fixture/src/twind.config.js
new file mode 100644
index 00000000..30ed4946
--- /dev/null
+++ b/test/fixture/src/twind.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from "@twind/core";
+import presetAutoprefix from "@twind/preset-autoprefix";
+import presetTailwind from "@twind/preset-tailwind";
+
+export default defineConfig({
+  theme: {
+    fontFamily: {
+      sans: ["monospace"],
+    },
+  },
+  presets: [presetAutoprefix(), presetTailwind()],
+});
diff --git a/test/fixture/src/twind.ts b/test/fixture/src/twind.ts
new file mode 100644
index 00000000..79898b4d
--- /dev/null
+++ b/test/fixture/src/twind.ts
@@ -0,0 +1,30 @@
+// @see https://twind.style/library-mode
+import {
+  cssom,
+  injectGlobal as injectGlobal$,
+  keyframes as keyframes$,
+  stringify as stringify$,
+  twind,
+  tx as tx$,
+  virtual,
+} from "@twind/core";
+import config from "./twind.config.js";
+
+const styleElementId = "__twind";
+
+export const sheet = typeof Deno === "undefined"
+  ? cssom(`style#${styleElementId}`)
+  : virtual();
+
+export const stringify = (target: unknown) =>
+  `<style id="${styleElementId}">${stringify$(target)}</style>`;
+
+//@ts-ignore twind type issue
+export const tw = twind(
+  config,
+  sheet,
+);
+
+export const tx = tx$.bind(tw);
+export const injectGlobal = injectGlobal$.bind(tw);
+export const keyframes = keyframes$.bind(tw);
diff --git a/test/fixture/theme.ts b/test/fixture/theme.ts
deleted file mode 100644
index d3879b39..00000000
--- a/test/fixture/theme.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ThemeConfiguration } from "twind";
-
-export const theme: ThemeConfiguration = {
-  fontFamily: {
-    sans: ["monospace"],
-  },
-};