Add custom CSS

Customize your styles by adding CSS files or adding styles inline.

Add CSS files

To add extra CSS files, add your custom styles to a file—for example, _static/custom.css and add the following options to your Sphinx configuration:

File: conf.py

html_static_path = ["_static"]
html_css_files = ["custom.css"]
Copy code

Your custom CSS file is included after the theme’s default CSS. Because of different CSS specificities, you might need to add !important to your CSS styles.

See also

html_static_path html_css_files

Important

You can’t use Tailwind’s @apply directive in custom CSS. Use regular CSS instead.

Extend templates with inline CSS

If you want to add CSS inline, you can extend the default page template and override the extrahead block:

File: page.html

{% extends "!page.html" %}

{{ super() }}

{% block extrahead %}
<style>
 /* Add your CSS styles here */
</style>
{% endblock %}
Copy code

Override CSS custom properties

You can override these custom properties:

--color-brand

The color for hover, focus, and highlight styles

--color-links

The color for links in the main text.

For example, to change the color of links to green, add a new CSS file or extend the templates and add the following CSS:

:root {
   --color-links: green;
}
Copy code

See also

CSS custom properties (MDN web docs)