Fueled Brand Tailwind Presets

A Tailwind CSS preset based on the Fueled.com design system (theme tokens, utilities, and base styles).

Requirements

• Tailwind CSS >=3.4

This preset expects these Tailwind plugins to be available (they are declared as peer deps):

• tailwindcss-animate
• @tailwindcss/typography

Install

npm install -D fueled-brand-tailwind-presets tailwindcss-animate @tailwindcss/typography

Usage

Tailwind config

TypeScript / ESM:

import type { Config } from "tailwindcss";
import fueledPreset from "fueled-brand-tailwind-presets";

const config = {
  presets: [fueledPreset],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./modules/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
} satisfies Config;

export default config;

CSS

If your app already has a globals.css that just contains Tailwind directives, you can keep it exactly like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Optional: if you want to use the preset’s bundled globals.css (it includes the Tailwind directives + some extra layered CSS), make your globals.css just import it:

@import "fueled-brand-tailwind-presets/globals.css";

Notes

• Dark mode: the preset uses Tailwind’s class strategy. The default CSS variables are dark; wrap content in .light to opt into light variables.
• Fonts: Aeonik is referenced, but fonts are not bundled. Load it yourself or rely on the fallbacks.
• Source of truth: token values and utilities live in globals.css and index.js.