Styling

Custom CSS & Styles

To add custom CSS, you can create a styles.css file in the Vocs root directory. This file will be automatically imported into the app.

my-project/             
├── docs/
│   ├── pages/ 
|   |   ├── index.mdx 
|   |   └── about.tsx 
│   └── public/
│   |   └── favicon.ico

|   └── styles.css
├── node_modules/
│   ...

The styles.css file could look like:

body {
  background-color: #f3f3f3;
}
 
.Vocs_H1 {
  color: red;
}

Importing CSS into layout Component

Alternatively, you can import CSS files directly into your layout component.

import './global.css'
import './theme.css'
 
export default function Root({ children }) {
  return children
}

Importing CSS into Markdown

You can also import CSS files directly into your Markdown files.

import './theme.css'
 
# Hello world
 
This is me.

Tailwind

Vocs comes with built-in support for Tailwind.

To enable Tailwind, simply import tailwindcss in the styles.css file of your project.

@import "tailwindcss";