mentorhub-design-tokens

Reusable Tailwind CSS preset for MentorHub design system.

Installation

npm install mentorhub-design-tokens

Usage

Add the preset in your tailwind.config.js:

// tailwind.config.js

import mentorhubDesignToken from "mentorhub-design-tokens";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [mentorhubDesignToken],
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
};

3. Import Tailwind and config in your CSS file

/* src/index.css */

@import "tailwindcss";
@config "../tailwind.config.js";

Example

<button class="bg-primary-500 text-white rounded-xl shadow-card">Submit</button>

<span class="bg-badge-activeBg text-badge-activeText"> Active </span>

<h1 className="text-display-lg text-text-main">MentorHub Dashboard</h1>

<h2 className="text-heading-md text-text-main">Task completion</h2>

<p className="text-body-sm text-text-muted">
  Track your learning progress and daily activity.
</p>

<span className="text-label-sm"> Active </span>