diff --git a/docs/content/docs/1.getting-started/5.theme/1.design-system.md b/docs/content/docs/1.getting-started/5.theme/1.design-system.md
index df393dce5..6716e7546 100644
--- a/docs/content/docs/1.getting-started/5.theme/1.design-system.md
+++ b/docs/content/docs/1.getting-started/5.theme/1.design-system.md
@@ -24,6 +24,20 @@ Tailwind CSS uses a CSS-first configuration, letting you define your design toke
 Check the Tailwind CSS documentation for all available theme variable customization options.
 ::
 
+::tip
+Tailwind CSS v4 changed its [Preflight](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) so that buttons use `cursor: default` instead of `cursor: pointer` to match browser defaults. If you'd like to restore the pointer cursor globally, add these base styles to your CSS:
+
+```css [app/assets/css/main.css]
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+```
+
+::
+
 ### Breakpoints
 
 Use the `--breakpoint-*` theme variables to [customize your breakpoints](https://tailwindcss.com/docs/responsive-design#customizing-your-theme).