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.
const WPDSTheme = require("@washingtonpost/wpds-tailwind-theme");
module.exports = {
content: [
...
],
theme: WPDSTheme,
};
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();
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
Headline
Subheadline
Body text
<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>