🧩 @tailwind-basekit/theme

Reusable Tailwind CSS Design Tokens and Theme Preset built on CSS variables.
It provides a consistent color system, typography, and form utilities that can be shared across multiple projects — without repeating configuration.

🚀 Why We Created This

In large apps (like e-commerce dashboards or multi-brand products), you often end up duplicating:

• The same Tailwind color palettes,
• The same border, text, and background styles,
• The same input and form component utilities.

@tailwind-basekit/theme solves that by centralizing all design tokens (colors, borders, fonts) in one package, powered by CSS variables — so you can change brand colors or switch themes instantly, without modifying every component.

🧠 Key Benefits

• One source of truth for all Tailwind tokens
• CSS-variable powered → easy dark/light theming
• Scalable across multiple projects (just import & go)
• Supports opacity utilities like bg-primary/80
• Custom utilities for forms, modals, overlays, tooltips, and labels
• Plug-and-play preset for Tailwind — no custom merge required

📦 Installation

npm install @tailwind-basekit/theme
# or
yarn add @tailwind-basekit/theme



🧱 Setup
1️⃣ Add preset to Tailwind config

In your project’s tailwind.config.js (or .ts/.cjs)

🧱 Setup
1️⃣ Add preset to Tailwind config

In your project’s tailwind.config.js (or .ts/.cjs)

2️⃣ Import CSS variables
@import "@tailwind-basekit/theme/theme.css";

🎨 Usage Examples

Now you can use all the custom semantic classes directly in your components.

Buttons

<button class="bg-primary text-white px-4 py-2 rounded-xl hover:opacity-90">
  Save Changes
</button>

<button class="bg-danger text-white px-4 py-2 rounded-xl">
  Delete
</button>


Cards & Containers

<div class="bg-gray-soft border border-border-default rounded-xl p-6">
  <h2 class="text-zinc-dark font-semibold text-lg">Card Title</h2>
  <p class="text-text-base mt-2">
    Tailwind Basekit gives you consistent spacing and color tokens.
  </p>
</div>


Form Inputs

<div class="form-container">
  <label class="form-label">Email</label>
  <input type="email" placeholder="[email protected]" class="form-input form-placeholder" />
  <p class="form-error">Invalid email</p>
</div>


Overlays & Modals


<div class="modal-overlay">
  <div class="bg-white rounded-xl p-6">
    <h3 class="text-lg font-semibold">Modal Title</h3>
    <p class="text-sm text-text-base">Overlay uses rgb(var(--overlay-bg)/0.5)</p>
  </div>
</div>



🌈 Color System

Every color group is defined using CSS RGB variables:

Color	Example	Variable
Primary	bg-primary	--green-base
Danger	bg-danger	--red-base
Success	bg-success	--green-base
Warning	bg-warning	--yellow-base
Border	border-border-default	--border-default
Text	text-text-base	--zinc-base
Background	bg-bg-surface	--white

Each color supports Tailwind opacity syntax:

<div class="bg-primary/70 text-white/90">...</div>



🧩 Extending or Overriding Tokens

You can still extend your project’s own config:


module.exports = {
  presets: [require("@tailwind-basekit/theme/tailwind.preset")],
  theme: {
    extend: {
      colors: {
        brand: "rgb(132 204 22 / <alpha-value>)", // add your custom color
      },
    },
  },
};