diff --git a/README.md b/README.md
index ef9435d..f06d19b 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,14 @@ export default ({ children, title }: any) => (
CSS can be accessed via `/css/main.css`:
+```html
+
+```
+
+### css reset
+
+`hype` includes a css reset for your convenience:
+
```html
```
diff --git a/src/index.tsx b/src/index.tsx
index 86ecb90..06953e2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,7 @@ import color from 'kleur'
import { transpile } from './utils'
const SHOW_HTTP_LOG = true
+const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
export class Hype extends Hono {
routesRegistered = false
@@ -36,6 +37,11 @@ export class Hype extends Hono {
console.log(fn(`${c.res.status}`), `${color.bold(method)} ${c.req.url} (${end - start}ms)`)
})
+ // css reset
+ this.get('/css/reset.css', async c => new Response(CSS_RESET, {
+ headers: { 'Content-Type': 'text/css' }
+ }))
+
// serve transpiled js
this.on('GET', ['/js/:path{.+}', '/shared/:path{.+}'], async c => {
let path = './src/' + c.req.path.replace('..', '.')
diff --git a/src/reset.css b/src/reset.css
new file mode 100644
index 0000000..f4c498e
--- /dev/null
+++ b/src/reset.css
@@ -0,0 +1,78 @@
+/* https://www.joshwcomeau.com/css/custom-css-reset/ */
+
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+ margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+ html {
+ interpolate-size: allow-keywords;
+ }
+}
+
+body {
+ /* 4. Add accessible line-height */
+ line-height: 1.5;
+ /* 5. Improve text rendering */
+ -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+ text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-wrap: balance;
+}
+
+/*
+ 10. Create a root stacking context
+ */
+#root,
+#__next {
+ isolation: isolate;
+}
\ No newline at end of file