Custom scripts - Mintlify

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.

<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

Custom CSS

Add CSS files to your repository to apply their defined class names and make them available in all of your MDX files.

Adding style.css

For example, you can add the following style.css file to customize the styling of the navbar and footer.

#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

Using identifiers and selectors

Mintlify has a set of common identifiers and selectors to help you tag important elements of the UI.

Custom JavaScript

Custom JS allows you to add custom executable code globally. It is the equivalent of adding a <script> tag with JS code into every page.

Adding custom JavaScript

Mintlify includes any .js file inside your content directory on every page of your documentation site. For example, you can add the following ga.js file to enable Google Analytics across the entire documentation.

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');