diff --git a/docs/content/1.documentation/2.headers/1.csp.md b/docs/content/1.documentation/2.headers/1.csp.md
index d4d04dcc..7a460d31 100644
--- a/docs/content/1.documentation/2.headers/1.csp.md
+++ b/docs/content/1.documentation/2.headers/1.csp.md
@@ -160,10 +160,15 @@ export default defineNuxtConfig({
     nonce: true,
     headers: {
       contentSecurityPolicy: {
-        'style-src': [
-          "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
-          "'nonce-{{nonce}}'",
-        ], 
+        'style-src':
+          process.env.NODE_ENV === 'production'
+            ? [
+              "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
+              "'nonce-{{nonce}}'",
+              "'strict-dynamic'",
+            ]
+            : // In dev mode, we allow unsafe-inline so that hot reloading keeps working
+            ["'self'", "'unsafe-inline'"],
         'script-src': [
           "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
           "'nonce-{{nonce}}'",
@@ -181,6 +186,8 @@ export default defineNuxtConfig({
 ```
 
 This will add a `nonce` attribute to all `<script>`, `<link>` and `<style>` tags in your application. 
+Note that to allow hot reloading during development, we conditionally add `'unsafe-inline'` to the `style-src` value.
+
 The `nonce` value is generated per request and is added to the CSP header. This behaviour can be tweaked on a route level by using the `routeRules` option:
 
 ```ts