Connect

1. Vanilla / ASP / runtime CSS

Link the pinned foundation.css. Dark mode: data-theme="dark" on the document, and .dark for Tailwind.

<link rel="stylesheet" href="https://design-tokens.clubready.com/production/v1.7/foundation.css">

2. Tailwind v4

Curl the one file at build/CI, then import it locally. Vite and webpack cannot @import a remote URL.

BASE=https://design-tokens.clubready.com/production/v1.7
curl -fsSL $BASE/foundation-tailwind.css -o src/tokens/foundation-tailwind.css

@import "tailwindcss";
@import "./tokens/foundation-tailwind.css";

It already contains every variable from foundation.css; new apps import only this file. Apps that already import foundation.css and then foundation-tailwind.css keep working unchanged. Pins up to v1.7 predate this: their foundation-tailwind.css opens with @import "./foundation.css", so also curl foundation.css into the same folder.

3. React

Depend on flowbite-react ^0.12 (as in this repo’s react-gallery/package.json). Vendor CSS as above, then use semantic token classes. See the React gallery.

npm install flowbite-react@^0.12

import { Button } from "flowbite-react";

export function PrimaryAction() {
  return (
    <Button className="bg-[var(--bg-clubready)] text-[var(--text-white)]">
      Save
    </Button>
  );
}

4. Angular

Depend on flowbite-angular ^21 (as in this repo’s angular-gallery/package.json). Vendor CSS the same way as Tailwind v4. See the Angular gallery.

npm install flowbite-angular@^21

import { Component } from "@angular/core";
import { Button } from "flowbite-angular/button";

@Component({
  selector: "app-primary-action",
  imports: [Button],
  template: `
    <button flowbiteButton class="bg-[var(--bg-clubready)] text-[var(--text-white)]">
      Save
    </button>
  `,
})
export class PrimaryAction {}

5. Don’t

• Parse tokens/*.json in a product app.
• Hardcode hex colours.
• Remote @import from the bundler (Vite/webpack cannot fetch a remote CSS URL that way).
• Overwrite /production/v1.x/ — version prefixes are immutable.