Installation
Decanter v7 customizes Tailwind CSS for you to generate utility classes that works with our design system. Before you begin, please read and review the installation process on the official Tailwind CSS website. Please also become familiar with Tailwind CSS presets as Decanter uses this functionality to make it even easier for you to use.
Frameworks
If you are adding Decanter to an existing project please have a review of the Framework Guides available from Tailwind CSS.
-
Install Tailwind into your framework of choice.
Some options include:
Next.js | Nuxt | SvelteKit | Angular | Vite | Laravel | Symfony | Astro | Create React App
-
Add Decanter as a dependency through your favorite package manager.
// Bash, shell, zsh, fish, etc. yarn add -D decanter npm install -D decanter pnpm install -D decanter
-
Add Decanter to your tailwind.config.js file as a preset.
// tailwind.config.js module.exports = { ... presets: [ require('decanter') ], ... }
-
Install fonts
It is recommended that you follow your framework's convention for installing fonts. You'll want to install Source Sans 3, Source Serif 4, Roboto Slab, and Roboto Mono from Google Fonts and include the ligature font for the Stanford Logo if you are using it. Here is an example or file you can include in your build to install the fonts.
https://github.com/SU-SWS/decanter/blob/main/fonts.css
@charset "UTF-8"; /** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) from Google Font */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); @font-face { font-family: "Stanford"; src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); font-weight: 300; font-display: swap; }
Standalone
-
Install Decanter Tailwindcss
The easiest way to add Decanter to your project is to use the npm package manager.
npm install -D decanter npx tailwind init
-
Configure your tailwind.config.js file
Configure your project to use the Decanter preset of Tailwind CSS and point
module.exports = { // This preset option pulls in all of the Tailwind CSS configuration. presets: [ require('decanter') ], // This should point to your source files as Tailwind CSS scans your files for the css classes you use. content: ["./src/**/*.{html,js}"], // You can still extend and mdify Tailwind CSS as you normally would. theme: { extend: {}, }, // You can still add plugins as you normally would. plugins: [], }
-
Add the tailwind directives to your main CSS file.
/src/css/main.css
/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); @font-face { font-family: "Stanford"; src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype"); font-weight: 300; font-display: swap; } @tailwind base; @tailwind components; @tailwind utilities;
-
Compile using the Tailwind CSS CLI tool
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/css/main.css -o ./dist/css/styles.css --watch
-
Add the compiled css to your project
Add your compiled CSS file to the
<head>
and start using Tailwind's utility classes to style your content.<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/css/styles.css" rel="stylesheet"> </head> <body> <h2 class="type-1 font-bold underline"> Hello world! </h2> </body> </html>
-
Start developing
You can now use the Tailwind CSS classes available from Decanter and Tailwind CSS. Please continue reading about how to use Tailwind CSS in their core concepts section and then come back and have a look at the examples and conventions sectioins in this website.