diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 34a21676..2b957b7b 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -1,6 +1,7 @@
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkBreaks from 'remark-breaks'
+import remarkHint from 'remark-hint'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import rehypeToc from 'rehype-toc'
@@ -16,7 +17,7 @@ export default makeSource({
   contentDirPath: 'content',
   documentTypes: [Post],
   mdx: {
-    remarkPlugins: [remarkGfm, remarkMath, remarkBreaks],
+    remarkPlugins: [remarkGfm, remarkMath, remarkBreaks, remarkHint],
     rehypePlugins: [
       [rehypePrettyCode, rehypePrettyCodeOptions],
       rehypeSlug,
diff --git a/src/styles/main.css b/src/styles/main.css
index d56304e6..502867ff 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -206,5 +206,19 @@
         @apply inline;
       }
     }
+
+    p.hint {
+      @apply border rounded w-max p-3;
+
+      &.tip {
+        @apply text-cyan-900 border-cyan-900 bg-cyan-900/10;
+      }
+      &.warn {
+        @apply text-amber-900 border-amber-900 bg-amber-900/10;
+      }
+      &.error {
+        @apply text-red-900 border-red-900 bg-red-900/10;
+      }
+    }
   }
 }