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
│ ...
styles.css
@layer vocs_preflight { @tailwind base; }
@tailwind components;
@tailwind utilities;
Add some Tailwind CSS
Now you can use Tailwind CSS in any of your Markdown files or React components.
example.md
# Hello world
This is me.
<p className="text-4xl text-red">With some Tailwind CSS</p>