initial commit after project creation
This commit is contained in:
Gerhard Scheikl
114
content/docs/tinadocs-features/styling.mdx
Normal file
114
content/docs/tinadocs-features/styling.mdx
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: Styling
|
||||
last_edited: '2025-10-27T09:05:25.584Z'
|
||||
auto_generated: false
|
||||
---
|
||||
|
||||
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](https://www.radix-ui.com/colors) colours.
|
||||
|
||||
|
||||
|
||||
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](https://github.com/tinacms/tina-docs/blob/main/README.md).
|
||||
|
||||
## 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](https://platejs.org/), 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.
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
Markdown forces you to certain conventions, which creates content consistency.
|
||||
</>}
|
||||
variant="info"
|
||||
/>
|
||||
|
||||
### Base Style Sizing
|
||||
|
||||
TinaDocs uses semantic HTML tags styled with TailwindCSS utility classes to maintain hierarchical sizing.
|
||||
|
||||
| Tag | Size | Use Case |
|
||||
| -------- | --------------- | ------------------------ |
|
||||
| h1 | 36px (2.25rem) | Page titles |
|
||||
| h2 | 30px (1.875rem) | Section headings |
|
||||
| h3 | 24px (1.5rem) | Subsections |
|
||||
| h4 | 20px (1.25rem) | Minor Subsections |
|
||||
| h5 | 18px (1.125rem) | Fine-grained Subsections |
|
||||
| p | 16px (1rem) | Body Text |
|
||||
| li/ul/ol | 16px (1rem) | Lists |
|
||||
| code | 16px (1rem) | Inline code |
|
||||
|
||||
Tina uses [Tailwind CSS](https://tailwindcss.com/) 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
|
||||
|
||||
<Callout
|
||||
body={<>
|
||||
Replace 'xxx' with your file type. Supported file types are .ico, .png and .svg
|
||||
</>}
|
||||
variant="warning"
|
||||
/>
|
||||
|
||||
## 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](https://tailwindcss.com/docs).
|
||||
|
||||
### 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.
|
||||
|
||||
```jsx
|
||||
// Example: Customizing a Tina component
|
||||
<TinaComponent className="bg-blue-500 text-white rounded-lg shadow-md" />
|
||||
```
|
||||
Reference in New Issue
Block a user