Skip to main content

Getting Started

Install package​

npm install @mavvy/m3-ui

Setup Tailwind​

Tailwind's website has a detailed setup depending on which framework you are using.

Tailwind Installation Guide

Tailwind Configuration​

Add m3-ui to your tailwind config.

tailwind.config.js

const preset = require('@mavvy/m3-ui/preset');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: preset.content,
  theme: {
    extend: preset.theme.extend,
  },
  plugins: preset.plugins
};

Add the Material Font​

On your main css file, or commonly global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --icon-font-family: Material Symbols Outlined;
  }
}

Then import the font via head

<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    rel="stylesheet"
  />
</head>