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.