Treasure Tailwind Config

Reusable Tailwind CSS configuration preset for the Treasure ecosystem. This allows projects to build with colors, fonts and other common customizations that follow the Treasure design system.

Installation

pnpm add -D @treasure-dev/tailwind-config

In tailwind.config.js, add the config as a preset:

presets: [require('@treasure-dev/tailwind-config')],

Fonts

If you also wish to use the Treasure design system fonts, import them in the root of your app:

General

import "@treasure-dev/tailwind-config/fonts.css";

Remix

import fontStylesheet from "@treasure-dev/tailwind-config/fonts.css";
import stylesheet from "~/tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: fontStylesheet },
  { rel: "stylesheet", href: stylesheet },
];

Now you can use the font via Tailwind using (font-sans and font-mono) or from a stylesheet:

body {
  font-family: "Whyte", sans-serif;
}

@treasure-dev/tailwind-config

4.3.0

Minor Changes

• 34f6153: Updated Tailwind CSS configs to use TypeScript

4.2.0

Minor Changes

• f8f4178: Add millik font to tailwind and fix font medium for grotesk

4.1.0

Minor Changes

• cd2d228: Updated styling to use variable font instead of fixed

4.0.0

Major Changes

• 07001a2: Change font file to woff/woff2 from otf

3.0.2

Patch Changes

• 28cfa6b: Removed unused CSS properties

3.0.0

Major Changes

• e4dd9d7: - Moved tailwind-config package to monorepo
  • Updated colors to match latest design system