Skip to main content

@buen/type@1.1.0
Built and signed on GitHub Actions

Tools for creating buen web typography with tailwind and react

This package works with Node.js, BrowsersIt is unknown whether this package works with Bun, Cloudflare Workers, Deno
JSR Score
100%
Published
3 weeks ago (1.1.0)

A module that converts an object of headlinea and text defs into Tailwind CSS utilities.

Examples

  1. Define custom styles, using either the default keys or by expanding upon them
// type-config.ts

const customHeadlines = {
  'display-xl': {
    fontFamily: "'Inter', 'sans-serif'",
    fontWeight: 'bold',
    clamp: [4.5, 9],
    letterSpacing: '-0.1em',
    lineHeight: 1,
    textTransform: 'uppercase',
  },
  // ...
}

const customTexts = {
  'body': {
    fontFamily: "'Inter', 'sans-serif'",
    fontWeight: 'normal',
    fontSize: '1.1rem'
    letterSpacing: '0em',
    lineHeight: 1.5,
    textTransform: 'none',
  },
  // ...
}
  1. Add the custom styles to the plugin
// tailwind.config.ts
import { buenTypeTailwind } from "@buen/type";
import { customHeadlines, customTexts } from "./type-config";

function typePlugin({ addUtilities }) {
  buenTypeTailwind({ addUtilities }, {
    customHeadlines,
    customTexts
  });
};

module.exports = {
  //  ...
  plugins: [
    typePlugin
  ]
};
Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @buen/type

Import symbol

import * as mod from "@buen/type";

Add Package

npx jsr add @buen/type

Import symbol

import * as mod from "@buen/type";

Add Package

yarn dlx jsr add @buen/type

Import symbol

import * as mod from "@buen/type";

Add Package

pnpm dlx jsr add @buen/type

Import symbol

import * as mod from "@buen/type";

Add Package

bunx jsr add @buen/type

Import symbol

import * as mod from "@buen/type";