@apollo/tailwind-preset

This repo contains a set of Tailwind presets that represent Apollo's brand for use in projects that utilize Tailwind as the styling system.

Installation

yarn add @apollo/tailwind-preset

Usage

To use the tailwind presets, import a preset and add it to the presets option in your base tailwind config.

// tailwind.config.ts
import { colors } from "@apollo/tailwind-preset";

const config = {
  // ...other tailwind config
  presets: [colors],
};

These presets do not include any configuration for content. You will need to provide the necessary content configuration in your project's tailwind config.

Presets

This package ships with several primitive presets that maintain a focused set of configuration. This allows flexibility to choose exactly what should be available in your project.

The presets include:

• colors - Includes preset configuration for color properties, such as background, border, etc.
• typography - Includes preset configuration for typography properties such as font-weight, font-size, etc. This does not include configuration for the font family (configured separately).
• fontFamily - Includes preset configuration for font families. See the Font family presets section below for more information.

import { colors } from "@apollo/tailwind-preset";

const config = {
  // ...other tailwind config
  presets: [colors],
};

[!IMPORTANT] The presets do not include the default Tailwind configuration.

Due to the way Tailwind merges presets together, the packaged presets do not extend the default tailwind configuration. You will also need to include the default tailwind config in the presets option to utilize all of the built in utilities in the default configuration (recommended). The default Tailwind config should be the first preset to ensure the brand presets correctly override the default config.

import { colors } from "@apollo/tailwind-preset";
import defaultConfig from "tailwindcss/defaultConfig";

const config = {
  presets: [
    // Ensure the default config comes first
    defaultConfig,
    colors,
  ],
};

Font family presets

Due to the way our font is licensed (Aeonik), we may not be able to use it in all projects. To ensure the right font family is used throughout the project, this package ships with 2 different font family presets.

• openSource - Used in projects that are unable to use our licensed fonts.
• licensed - Used in projects that have permission to use our licensed fonts (e.g. Aeonik).

// tailwind.config.ts
import { fontFamily } from "@apollo/tailwind-preset";

const config = {
  presets: [
    // ...other presets,
    fontFamily.openSource, // or fontFamilyPreset.licensed
  ],
};

Generated class names are the same for both font family presets.