@pacer-ui/tailwind-preset

v1.0.1

Published

22 days ago

Shared Tailwind CSS preset untuk PACER (Pertamina Patra Niaga Components & Experience Resources).

Downloads

114

0High
0Medium
0Low

prakasajudha

tailwindcss preset design-system pertamina

@pertamina/tailwind-preset

Shared Tailwind CSS preset untuk PACER (Pertamina Patra Niaga Components & Experience Resources).

Installation

npm install @pertamina/tailwind-preset
# or
pnpm add @pertamina/tailwind-preset

Usage

Basic Setup

// tailwind.config.js
module.exports = {
  presets: [require('@pertamina/tailwind-preset')],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
}

With Custom Overrides

// tailwind.config.js
module.exports = {
  presets: [require('@pertamina/tailwind-preset')],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      // Override atau tambah custom values
      colors: {
        custom: '#123456',
      },
    },
  },
}

What's Included

Preset ini mengintegrasikan semua design tokens:

Colors

<div className="bg-brand-primary-500 text-neutral-0">
  Pertamina Primary
</div>

Spacing

<div className="p-4 m-6 gap-3">
  4px-based spacing
</div>

Typography

<p className="font-sans text-base font-medium leading-normal">
  Typography tokens
</p>

Border Radius

<div className="rounded-lg">
  Border radius tokens
</div>

Shadows

<div className="shadow-lg">
  Shadow tokens
</div>

Animations

<div className="transition-all duration-fast ease-easeInOut">
  Motion tokens
</div>

Component Classes

Preset juga menyediakan base component classes:

Button

<button className="btn bg-brand-primary-500 text-neutral-0">
  Button
</button>

Input

<input className="input" type="text" />

Card

<div className="card">
  Card content
</div>

Dark Mode

Dark mode menggunakan class strategy:

// Tambah class 'dark' di root element
<html className="dark">
  <body>
    <div className="bg-neutral-0 dark:bg-neutral-900">
      Content
    </div>
  </body>
</html>

Blazor Integration

Untuk Blazor, compile Tailwind CSS ke static file:

# package.json
{
  "scripts": {
    "build:css": "tailwindcss -i ./src/styles.css -o ./wwwroot/css/styles.css --minify"
  }
}

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Philosophy

Token-based - Semua value dari design tokens
Consistent - Sama di React, Vue, dan Blazor
Extensible - Dapat di-override sesuai kebutuhan
Type-safe - Full TypeScript support
Tree-shakeable - Hanya CSS yang dipakai akan di-bundle

Updating

Ketika design tokens di-update, rebuild preset:

pnpm build

Semua library yang depend ke preset ini akan otomatis menggunakan tokens terbaru.