{/* Generates no CSS: the class name is assembled at runtime. */}

``` > [!NOTE] > > The web editor's live preview does not generate CSS for page-specific Tailwind classes, so a styled page can look unstyled while you edit it. See [Tailwind classes not applying in the editor's live preview](https://www.mintlify.com/docs/help-center/tailwind-classes-not-applying-in-editor-preview.md). > [!WARNING] > > Avoid the `style` prop. It can cause a layout shift on page load, especially on custom mode pages. Use Tailwind CSS classes or custom CSS files instead. ## Add custom CSS Mintlify includes any `.css` file inside your content directory on every page of your site. The content directory is the folder in your repository that contains your `docs.json` file and MDX pages. You do not need to import or reference the file from `docs.json` or your MDX files. To add custom styles, create a `.css` file in your content directory. Any class names, ID selectors, or element selectors you define become available across all of your MDX files. For example, define a class in `style.css`: ```css Example style.css theme={null} .my-callout { border-radius: 1rem; background: #f0f9ff; padding: 1rem; } ``` You can combine custom class names with [Tailwind CSS](#style-with-tailwind-css) classes on the same element. The references and styling of common elements are subject to change. Use custom styling with caution since breaking changes may occur in future updates. For example, you can add the following `style.css` file to customize the styling of the navbar and footer. ```css theme={null} #navbar { background: #fffff2; padding: 1rem; } footer { margin-top: 2rem; } ``` CSS targeting hooks use different syntax: * **ID selectors**: unique page-level elements targeted with `#value { }` in CSS * **Class selectors**: component and layout classes targeted with `.value { }` in CSS, such as `.card`. * **Element selectors**: HTML tags targeted with `value { }` in CSS, such as `footer`. * **Attribute selectors**: component parts or states targeted with brackets, such as `[data-component-part="card-icon"]`. These selectors are not interchangeable. For example, `.card` targets a class, while `card` targets a tag named ``. Hooks depend on the rendered theme, component, configuration, and state. See the [customization skill](https://www.mintlify.com/docs/customize/agent-skill.md) for exact syntax, availability, lifecycle, and compatibility references. > [!TIP] > > Use inspect element to find references to elements you're looking to customize. ### ID selectors Use these as `#value` in CSS. For example, `#navbar { background: red; }`. A hook exists only when its owning element renders; inspect the active mounted layout during navigation transitions. > [accordion] Page layout > > * `#body-content`: Outermost wrapper for the page body. > * `#content-area`: Primary content area, excluding the sidebar and table of contents. > * `#content`: Inner content element within the content area. > * `#header`: Page-level header element. > * `#banner`: Announcement banner displayed above the navbar. > * `#footer`: Page footer. Also targetable as an element selector: `footer`. > * `#page-title`: The `

`, `+`, `~`) or uses the `&` nesting selector. * Declarations that load resources, such as `url()` and `image-set()`. * `position: fixed`. * `!important` inside keyframes. Mintlify ignores attributes on the `