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: []
}