@esds-sangam/tailwind-config

Shared Tailwind CSS configuration for the ESDS Sangam Design System.

This package exposes a Tailwind preset wired to @esds-sangam/tokens so that Tailwind utilities (colors, spacing, radii, etc.) align with Sangam’s design tokens and CSS variables from @esds-sangam/styles.

Installation

In a consuming app:

npm install -D \
  @esds-sangam/tailwind-config \
  @esds-sangam/styles \
  @esds-sangam/tokens \
  tailwindcss \
  tailwindcss-animate \
  postcss \
  autoprefixer

Usage

1. Tailwind config

Create or update your tailwind.config.cjs (or .js) to extend the Sangam preset:

// tailwind.config.cjs
const sangamTailwind = require("@esds-sangam/tailwind-config");

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Start from Sangam preset
  ...sangamTailwind,

  // Add your app's own content paths
  content: [...sangamTailwind.content, "./src/**/*.{js,ts,jsx,tsx,mdx}"],
};

2. Global styles

Import Sangam base styles and theme CSS in your app’s global stylesheet (for example, src/styles/globals.css):

@import "@esds-sangam/styles/globals.css";
@import "@esds-sangam/styles/theme.css";
@import "@esds-sangam/styles/dark.css"; /* optional dark theme */
@import "@esds-sangam/styles/tailwind.css"; /* Tailwind layer aligned to Sangam tokens */

Now Tailwind utilities such as bg-primary, text-neutral-700, rounded-lg, shadows, typography, and spacing are driven by the same token set used by the Sangam UI components.

Internal usage (monorepo)

Inside this repository, packages like packages/ui and apps/storybook import the shared config directly from the tooling/tailwind folder:

// packages/ui/tailwind.config.cjs (or .ts importing from ../../tooling/tailwind/index.cjs)
const baseConfig = require("../../tooling/tailwind/index.cjs");

module.exports = {
  ...baseConfig,
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
};