# @mskcc/tailwind

Latest version **2.7.3** (published 2025-02-05) · 0 weekly downloads

## Install

```sh
npm install @mskcc/tailwind
pnpm add @mskcc/tailwind
yarn add @mskcc/tailwind
bun add @mskcc/tailwind
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.7.3 |
| Published | 2025-02-05 |
| First published | 2023-09-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jamesmsk, walee, chapmanm, informatix9, nierococ |

## Links

- npm: https://www.npmjs.com/package/@mskcc/tailwind
- npm.io page: https://npm.io/package/@mskcc/tailwind

## Dependencies (7)

- [postcss](https://npm.io/package/postcss.md) ^8.4.31
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.3.3
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.15
- [@mskcc/colors](https://npm.io/package/@mskcc/colors.md) 2.7.3
- [@mskcc/themes](https://npm.io/package/@mskcc/themes.md) 2.7.3
- [postcss-import](https://npm.io/package/postcss-import.md) ^15.1.0
- [@mskcc/fundamentals](https://npm.io/package/@mskcc/fundamentals.md) 2.7.3

## Recent versions

- 2.7.3 (latest) — 2025-02-05
- 3.0.0-beta.8 (beta) — 2025-02-12
- 3.0.0-beta.7 — 2025-02-05
- 3.0.0-beta.6 — 2025-02-05
- 3.0.0-beta.4 — 2025-02-03
- 3.0.0-beta.3 — 2025-01-10
- 3.0.0-beta.2 — 2025-01-10
- 3.0.0-beta.1 — 2024-12-04
- 3.0.0-beta.0 — 2024-12-03
- 2.7.2 — 2024-10-22
- 2.7.1 — 2024-08-22
- 2.7.1-beta.0 — 2024-08-20
- 2.7.0 — 2024-08-20
- 2.7.0-beta.6 — 2024-08-08
- 2.7.0-beta.5 — 2024-08-08
- … 22 more at https://npm.io/package/@mskcc/tailwind/versions

## README

<img src="https://cdn.jsdelivr.net/npm/@mskcc/dsm-assets@latest/src/design-system-logo.svg" />

# 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.

```bash
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`

```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

```js
// postcss.config.js
module.exports = {
  ...require('@mskcc/tailwind/postcss.config'),
};
```

```css
/* 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]`

---
_Source: https://npm.io/package/@mskcc/tailwind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._