BANGK Tailwind Design System

A Tailwind CSS preset and design system utilities for BANGK projects. Includes color system, spacing utilities, and typography presets.

Installation

npm install jojo-bangk-tw-design-system
# or
yarn add jojo-bangk-tw-design-system
# or
pnpm add jojo-bangk-tw-design-system
# or
bun add jojo-bangk-tw-design-system

Usage

Tailwind Preset

In your tailwind.config.ts or tailwind.config.js:

import { tailwindPreset } from 'jojo-bangk-tw-design-system/preset'
// or for CommonJS
const { tailwindPreset } = require('jojo-bangk-tw-design-system/preset')

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindPreset]
  // your config...
}

CSS Variables

Import the CSS variables in your global styles:

/* Option 1 */
@import 'jojo-bangk-tw-design-system/styles.css';
/* Option 2 */
@import 'jojo-bangk-tw-design-system/bangk-preset.css';

Or in your JavaScript/TypeScript entry file:

import 'jojo-bangk-tw-design-system/styles'

Colors and Types

import {
  type Colors, // Color palette types
  type Semantic, // Semantic color types
  type PresetConfig // Tailwind preset configuration type
} from 'jojo-bangk-tw-design-system'

Features

• 🎨 Complete color system
  • Semantic colors
  • Adaptive palettes
  • Light/dark mode support
• 📏 Consistent spacing system
  • Custom spacing scales (2xs to 5xl)
  • Compatible with Tailwind defaults
• 📝 Typography system
  • Font sizes from 2xs to 2xl
  • Line heights from 2xs to 8xl
• 🔧 Preconfigured border radius system
• 📦 Full TypeScript support
• 🚀 ESM and CommonJS support

Development

# Install dependencies
bun install

# Build the package
bun run build

# Type check
bun run typecheck

License

ISC