Installation

Install the theme package from npm

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

Add the theme to your tailwind.config.js. It's strongly recommended to override the default theme to prevent the accidental use of Tailwind's variables and scales. Tailwind's preflight base styles should be disabled.

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

module.exports = {
  content: [
   ...
  ],
  corePlugins: {
    preflight: false,
  },
  theme: WPDSTheme,
};
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape

Ensure that the WPDS fonts and css variables are available on the page if they are not already installed.

// _app.js or other main script file

//                     also available from @washingtonpost/wpds-ui-kit
import { getCssText, globalStyles } from "@washingtonpost/wpds-theme";

const style = document.createElement("style");
style.innerHTML = getCssText();
document.head.appendChild(style);

globalStyles();
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape

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 for each value replace the Tailwind name and scale.

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

Example

<h1 className="font-headline text-200 text-primary mt-0 mb-025">Headline</h1>
<h2 className="font-subhead font-light text-150 leading-200 mt-0 mb-025">
  Subheadline
</h2>
<p className="font-body text-100 mt-0 mb-025">Body text</p>
<div className="font-meta text-075 text-accessible mb-100">Meta text</div>
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape