Getting Started

A quick guide on how to setup Mono for use in your app.

Setup SvelteKit

If you already have a Svelte app ready, you can skip this step. We recommend using SvelteKit:

yarn create svelte my-app
cd my-app
yarn

Installation

Mono is available on npm. Run:

yarn add --dev mono-svelte

Setup TailwindCSS

Mono uses TailwindCSS for its components. We recommend using TailwindCSS in your project if you’re going to use this library.

Install

yarn add --dev tailwindcss postcss autoprefixer

Config file

To create the default config file, run:

npx tailwindcss init -p

Mono needs a little more configuration to get it working. Use this config:

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{html,js,svelte,ts,svx}',
		'./node_modules/mono-svelte/**/*.{html,js,svelte,ts}'
	],
	theme: {
		extend: {
			colors: {
				primary: {
					100: '#f1f5f9',
					900: '#0f172a'
				}
			}
		}
	},
	plugins: []
}
Mono