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:

styles.css

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

Importing CSS into layout Component

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

layout.tsx

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.

example.md

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

Tailwind CSS

Vocs comes with built-in support for Tailwind CSS.

All you need to do is add a tailwind.config.cjs file to your root directory, as well as a styles.css file.

Add `tailwind.config.cjs` file

Add a tailwind.config.cjs configuration to your project root.

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

With the following content:

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./docs/**/*.{html,md,mdx,tsx,js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add `styles.css` file

Then add a styles.css file, and import the Tailwind CSS.

my-project/             
├── docs/
│   ├── pages/ 
|   |   ├── index.mdx 
|   |   └── about.tsx 
│   └── public/
│   |   └── favicon.ico
|   └── styles.css
├── node_modules/
├── tailwind.config.cjs
│   ...