API Reference · Tailwind CSS

@meterry/component-tailwindcss exports the Tailwind plugin meterPlugin (also the default export).

Registration

Tailwind v3 (tailwind.config.js):

import meterPlugin from '@meterry/component-tailwindcss'

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx,vue}'],
  plugins: [meterPlugin],
}

Tailwind v4 (CSS-first):

@import "tailwindcss";

@plugin "@meterry/component-tailwindcss";

/* The meter-* class names live as strings in the core package source
   (when consuming the published package, point @source at the dist entry) */
@source "../node_modules/@meterry/component/dist/index.js";

When importing only part of Tailwind (e.g. a host application skips preflight), mind the cascade order between component classes and utilities; for normal setups, a plain @import "tailwindcss" is all you need.

Generated output

1. meter palette: meter.background / meter.surface / meter.muted / meter.text / meter.subtle / meter.border / meter.accent / meter.danger.
2. Component classes (addComponents, respectPrefix: false):

Class	Area
meter-root	Component root (font, text color)
meter-card	Card container (border, radius, shadow)
meter-header / meter-caption / meter-title / meter-description	Header area
meter-body	Content area
meter-toolbar / meter-filter / meter-button	Toolbar, filter controls, buttons
meter-filter-bar	Shared filter bar root (classNames.filterBar); see Shared Filters
meter-table	Table (sticky header, zebra stripes, hover)
meter-pagination / meter-actions	Pagination area
meter-empty / meter-loading / meter-error	State areas
meter-value / meter-unit	MeterUsage value area
meter-chart	Chart container
meter-chart-svg / meter-chart-grid / meter-chart-axis / meter-chart-line / meter-chart-area	SVG renderer output
meter-chart-legend / meter-legend-item	Legend
meter-usage-bars / meter-usage-bar	Headless usage bars

CSS variables

Every rule resolves its colors and radii from --meter-* variables (variable first, then fallback to the host Tailwind theme). See Theming & Styles for the full list. Runtime override example:

:root {
  --meter-accent: #7c3aed;
  --meter-radius-lg: 20px;
}

Types

• MeterTailwindPluginApi: the minimal Tailwind API shape the plugin uses (handy for custom pipelines)

List reuses meter-table for the shared header, aligned cells and horizontal scrolling. meter-list is an additional wrapper hook and meter-list-footer styles Load more / Retry / Refresh.