@mskcc/tailwind
v2.7.2
Published
<img src="https://cdn.jsdelivr.net/npm/@mskcc/dsm-assets@latest/src/design-system-logo.svg" />
Downloads
450
Keywords
Readme
MSK Tailwind Package
tailwind configuration file for MSKCC
Installation
You will need to install the following packages and add the preset to your tailwind.config.js
file.
We also have postcss and stylesheet config files, but our tailwind config is the only one that is needed to incorporate DSM.
npm install --save-dev @mskcc/tailwind tailwindcss postcss postcss-import autoprefixer
Create the following files inside root directory of your project:
tailwind.config.js
postcss.config.js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('@mskcc/tailwind/presets')],
content: [
'./src/**/*.{js,ts,jsx,tsx}',
// or wherever your files that will use tailwind lives
],
};
Extended Configurations
// postcss.config.js
module.exports = {
...require('@mskcc/tailwind/postcss.config'),
};
/* add the following to your global stylesheet */
@import '@mskcc/tailwind/styles.css';
Usage
- Colors
bg-msk-[color]-[10-100]
- Elevations (box shadows)
shadow-msk-elevation-[plus|minus]-[0-24]
- Typescale (h1, display1)
text-msk-[type]-[0-9]
- Font family
font-msk-[type]