move styling info to Custom scripts

Author: ethanpalm

image-embeds.mdx

@@ -172,23 +172,6 @@ Embed external content using iframe elements:
 ></iframe>
 ```
 
-## Styling with Tailwind CSS
-
-Use Tailwind CSS v3 to style HTML elements. You can control layout, spacing, colors, and other visual properties. Some common classes are:
-
-- `w-full` - Full width
-- `aspect-video` - 16:9 aspect ratio
-- `rounded-xl` - Large rounded corners
-- `block`, `hidden` - Display control
-- `dark:hidden`, `dark:block` - Dark mode visibility
-
-
-Tailwind CSS arbitrary values are not supported. For custom values, use the `style` prop instead.
-
-```html
-<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
-```
-
 ## Related resources
 
 <Card title="Frame component reference" icon="frame" horizontal href="/components/frames">

settings/custom-scripts.mdx

@@ -1,10 +1,26 @@
 ---
-title: 'Custom scripts'
-description: 'Fully customize your documentation with custom CSS and JS'
+title: "Custom scripts"
+description: "Fully customize your documentation with custom CSS and JS"
 icon: "code"
 ---
 
-Add custom CSS and JavaScript to your documentation to fully customize the look and feel.
+Use CSS to style HTML elements or add custom CSS and JavaScript to fully customize the look and feel of your documentation.
+
+## Styling with Tailwind CSS
+
+Use Tailwind CSS v3 to style HTML elements. You can control layout, spacing, colors, and other visual properties. Some common classes are:
+
+- `w-full` - Full width
+- `aspect-video` - 16:9 aspect ratio
+- `rounded-xl` - Large rounded corners
+- `block`, `hidden` - Display control
+- `dark:hidden`, `dark:block` - Dark mode visibility
+
+Tailwind CSS arbitrary values are not supported. For custom values, use the `style` prop instead.
+
+```html
+<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
+```
 
 ## Custom CSS