@100shapes/monday-theme

Custom tailwindcss config to match Mondaycom's design system.

Usage no npm install needed!

<script type="module">
  import 100shapesMondayTheme from 'https://cdn.skypack.dev/@100shapes/monday-theme';
</script>

README

Monday.com Tailwind Theme

Custom Tailwind config to skin html classes based on Monday.com's Design System

Installation

Yarn or npm install

npm install @100shapes/monday-theme

or

yarn add @100shapes/monday-theme

Installation

  1. Set up Tailwind however you choose within your project.

  2. in your project's tailwind.config.js add the follwing:

const config = require('@100shapes/monday-theme')

module.exports = {
  ...config,
}

Note

This configuration replaces Tailwinds defaults, so the the classes in tailwind's docs (i.e. padding) will no longer exist.

If you'd prefer to keep these default clases, use tailwind's extend.

Usage

Something like this:

<div class="flex px-MD border border-primary bg-riverstoneGrey">
  <p class="text-medium">I look like Monday.com</p>
</div>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT