Instalation

Install the theme package from npm

npm install -D @washingtonpost/wpds-tailwind-theme;

Add the theme to your tailwind.config.js

const WPDSTheme = require("@washingtonpost/wpds-tailwind-theme");

module.exports = {
  content: [
   ...
  ],
  theme: WPDSTheme,
};

Token Naming

The following tokens are used from the WPDS.

• color
• size
• fonts
• fontSize
• fontWeights
• lineHeight
• radii
• shadow
• z-index

The wpds token names and scales and for each value replace the Tailwind name and scales scale.

For example when using lineHeight <p class="leading-normal"> becomes <p class="leading-150">

Example

<h1 className="font-headline text-200 text-primary">Headline</h1>
<h2 className="font-subhead font-light text-150 leading-200">Subheadline</h2>
<p className="font-body text-100">Body text</p>
<div className="font-meta text-075 text-accessible">Meta text</div>