Styling

TinaDocs is opinionated when it comes to the style of its documentation. You can change this as you see fit.

Colours and Theming

There are 6 built colour pre-sets.

These are based on the radix design system colours.

Figure: Choose your starter

You can test these out locally, or configure which theme is selected via the Tina settings.

Adding a New Theme

We recommend modifying an existing theme rather than creating new theme options.

You can find this configuration in src/styles/global.css

You can specify a new theme in addition to those shown, you'll need to update…

• The Tina collection with the new option at tina/collections/settings.tsx
• The theme selector, src/components/ui/theme-selector.tsx
• The styles file with the new theme, at src/styles/global.css

💡 For detailed instructions on creating custom themes, including step-by-step guides, color guidelines, and examples, see the Custom Theming section in the README.

Typography

TinaDocs comes with a flexible, clean typographic system.

Writing with Markdown

The data behind TinaCMS is markdown, so some concepts such as text colour and font size don't exist natively. All editing is done through a rich-text editor powered by Plate, that still gives you a word-like editing experience.

Everything transforms into markdown behind the scenes.

• Titles use standard Markdown syntax (#).
• You can change font size via headling levels in the toolbar.
• Inline formatting maps 1:1 with Markdown.
• Empty lines aren't available, if this is a problem either modify the <hr> element in the markdown mapping to be transparent, or add margins where necessary.

Markdown forces you to certain conventions, which creates content consistency.

Base Style Sizing

TinaDocs uses semantic HTML tags styled with TailwindCSS utility classes to maintain hierarchical sizing.

Tina uses Tailwind CSS to style components, giving you a powerful and flexible way to customize your site's appearance.

Favicon

A favicon is the small icon that appears in your browser tab, bookmarks, and on mobile home screens.

TinaDocs supports custom favicons so you can brand your documentation site to match your product.

1. Open the codebase of your new site
2. Navigate to the public/ directory
3. Delete the existing favicon.ico
4. Insert your own logo image into the public/ directory
5. Rename it to favicon.xxx

Replace 'xxx' with your file type. Supported file types are .ico, .png and .svg

Custom Styling

Styling for components or the overall site requires modifying the code, but is straightforward.

Using Tailwind CSS

You can customize your site's styling by:

1. Modifying your tailwind.config.js file to update colors, fonts, spacing, and other design tokens
2. Applying Tailwind utility classes directly to components
3. Creating custom CSS in your project that extends Tailwind's capabilities

For a complete guide to Tailwind's capabilities, refer to the official Tailwind CSS documentation.

Component-Specific Styling

You can customize the appearance of specific Tina components – the tailwind in the /app router and embeds (/components/tina-markdown) directories can be updated to match your colour scheme and UI standards.

TinaCMS itself is only coupled to the props defining data for components.