token-core

Shared Nuxt UI config, Tailwind CSS v4 theme tokens, typography utilities, and Lato font files.

Install

pnpm add token-core @nuxt/ui tailwindcss

@nuxt/ui and tailwindcss are peer dependencies, so the consuming app must install them.

Recommended CSS Import

Use this when the app does not need to customize the import order:

@import 'token-core/main.css';

token-core/main.css already imports:

@import url('./fonts/font.css');
@import 'tailwindcss';
@import '@nuxt/ui';
@import './theme.css';

@source './index.js';

Do not also import tailwindcss, @nuxt/ui, or token-core/theme.css in the same app stylesheet when using token-core/main.css, otherwise the generated CSS can be duplicated.

Manual CSS Import

Use this when the app wants to control imports itself:

@import 'token-core/fonts/font.css';
@import 'tailwindcss';
@import '@nuxt/ui';
@import 'token-core/theme.css';

@source '../../../node_modules/token-core/index.js';

The @source path is relative to the stylesheet where you write it. Adjust it if your app stylesheet is at a different depth.

Example for src/app/assets/main.css:

@import 'token-core/fonts/font.css';
@import 'tailwindcss';
@import '@nuxt/ui';
@import 'token-core/theme.css';

@source '../../../node_modules/token-core/index.js';

Nuxt UI Config

Pass the package config directly to @nuxt/ui/vite:

import ui from '@nuxt/ui/vite';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import { UIConfig } from 'token-core';

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ...UIConfig,
    }),
  ],
});

If you keep the config in a separate file:

import type { NuxtUIOptions } from '@nuxt/ui/vite';
import { UIConfig as tokenCoreUIConfig } from 'token-core';

export const UIConfig: NuxtUIOptions = tokenCoreUIConfig;

Do not wrap appConfig like this:

// Wrong: creates ui.ui and Nuxt UI will not read the component config correctly.
export const UIConfig = {
  ui: appConfig,
};

Available Exports

import appConfig, { AppConfig, UIConfig, appConfig as namedAppConfig, uiConfig } from 'token-core';

@import 'token-core/main.css';
@import 'token-core/theme.css';
@import 'token-core/fonts/font.css';

Development

Run the smoke test:

pnpm test

Publish:

pnpm publish:npm

Notes

This package targets Tailwind CSS v4 and uses CSS directives such as @theme, @utility, @apply, and @source. The consuming application must compile CSS with Tailwind CSS v4.