@mskcc/tailwind

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]