README

Version: 8 (beta)

Changelog: CHANGELOG.md · Upgrading from v7? See UPGRADE.md

Description

Decanter is a web design and development system for Stanford University. Version 8 is a CSS-first preset for Tailwind CSS v4: you import plain CSS and get the Stanford Identity color palette, typography scales, spacing system, components, utilities, and custom variants on top of core Tailwind.

Demo

The test page in this repository (static/index.html) demonstrates the custom Decanter features. Run it locally with npm install && npm run dev.

Documentation

docs/README.md - index includes a quick-reference table of everything Decanter adds to Tailwind
Getting Started — installation, entry points, composition rules
Colors · Typography · Spacing & Layout
Components · Forms · Utilities · Variants
Development — working on Decanter itself

Installation

You first need to install Tailwind CSS v4. See the Tailwind CSS website for your framework's recommended installation method.

For example, for use with Next.js v16, install Tailwind CSS v4, @tailwindcss/postcss and Decanter (beta release) as dev dependencies:

npm install -D tailwindcss @tailwindcss/postcss decanter@beta

In your project's main CSS file:

@import 'decanter';
@import 'decanter/forms'; /* optional — only if your site has forms elements that use the Decanter styles */

There is no need to add a separate @import 'tailwindcss', or your output will contain the preflight reset twice. Build with any Tailwind v4 integration (@tailwindcss/cli, @tailwindcss/vite, or @tailwindcss/postcss).

Entry points

Import	Contents
`decanter`	Everything, including full base styles and the default 62.5% root font size
`decanter/minimal`	Same sizing mode, without element-level base opinions such as link colors
`decanter/base16`	Everything, but leaves the HTML root font size unchanged
`decanter/base16/minimal`	The base16 sizing mode with minimal base styles
`decanter/forms`	Opt-in form classes + the bundled `@tailwindcss/forms` reset (requires one of the four main entries above)
`decanter/colors`	Stanford color palette only — standalone, works on stock Tailwind
`decanter/src/*`	Any individual source file, for à-la-carte composition

Both sizing modes keep Decanter-owned numeric utilities, tokens, and fixed component dimensions at the same rendered pixel sizes in rem units: p-16 is 16px and text-18 is 18px at standard browser settings. Choose a base16 entry when Tailwind core or another library expects the browser's usual 16px rem basis. See Getting Started for details.

Fonts

Decanter provides font-family utilities (font-sans, font-serif, font-stanford) but does not bundle or load the font files — how fonts are loaded is framework-specific, so that's left to you. Load only the families you use; if one isn't loaded, its class falls back gracefully down the stack.

See Loading the fonts for which families and weights to load and copy-paste examples (<link>, @import, self-hosting, and framework tooling), plus the @font-face snippet for the Stanford wordmark font used by .logo.

Icons

Decanter does not include any icon assets. We recommend the heroicons package — Hero Icons are created by the Tailwind CSS team, open source, and usable as SVG or JSX.

Accessibility

This project conforms to level AA WCAG 2.0 standards as required by the university's accessibility policy. For more information on the policy please visit: https://www.stanford.edu/accessibility.

su-sws / decanter

Package info

Security

Statistics