tensiva

CSS utility classes, design tokens, and a dynamic stylesheet runtime for Nuxt 3 and Nuxt 4.

Features

• Utility-class CSS generated at runtime (SSR + client)
• Mergeable design tokens via nuxt.config
• Built-in color themes (OKLCH palettes)
• Component CSS registry (t-button, layout, forms, typography, etc.)
• Optional Google Fonts pipeline
• Bundled Material Symbols icons (via Iconify at build time in the monorepo)

Requirements

• Node.js >= 20
• Nuxt ^3.16 or ^4.0
• Vue ^3.5

Installation

npm install tensiva
# or
pnpm add tensiva

Usage

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['tensiva'],
  tensiva: {
    activeTheme: 'blueLagoon',
    theme: 'dark-system',
    fonts: [
      {
        family: 'DM Sans',
        source: 'google',
        weights: [400, 500, 700],
        subsets: ['latin'],
        display: 'swap',
      },
    ],
  },
})

Apply classes in templates:

<div class="t-main t-pa-md t-bg-surface">
  <button class="t-button t-button--filled">Click</button>
</div>

Configuration

All options are under the tensiva key (configKey in the module). Common defaults:

| Option | Default | Description | |--------|---------|-------------| | server | true | Server-side stylesheet runtime | | client | true | Client-side stylesheet runtime | | api | true | /api/tensiva/* handlers for dynamic CSS | | activeTheme | blueLagoon | Active color theme name | | theme | dark-system | Light/dark mode behavior | | cssReset | true | Inject CSS reset | | fonts | [] | Google/self-hosted font definitions |

See module defaults and defaults.ts in the repository for the full list.

Icons

The package ships a bundled icon registry (registry.json) with SVGs sourced from Iconify (e.g. Material Symbols). Icon set licenses apply to those assets; see Google Fonts / Material Symbols and Iconify collection terms.

Related packages

• tensiva-ui — optional UI components (published separately)

License

MIT © Cristian Simtion