Buen Type

FLUID TYPOGRAPHY IS BUEN


  export default function App() {
    return(
      <main>
        <div>
          <p class="headline-display-xxl">Display XXL</p>
          <p class="headline-display-xl">Display XL</p>
          <p class="headline-display-lg">Display LG</p>
          <p class="headline-display-md">Display MD</p>
          <p class="headline-display-sm">Display SM</p>
          <p class="headline-display-xs">Display XS</p>
        </div>
      </main>
    );
  }

FEATURES

Fluid Typography

Text scales smoothly between specified viewport widths, ensuring consistent readability across devices.

Tailwind IntelliSense

Provides intelligent autocomplete suggestions for Tailwind CSS classes, enhancing development speed and accuracy.

Typescript Safe

Type safety for Tailwind CSS classes and utilities, reducing errors and improving code reliability.

INSTALLATION

Install the jsr package with your package manager of choice. Then import the plugin in your Tailwind CSS configuration file.


  npx jsr add @muybuen/type
  // or
  deno add @muybuen/type
  // or
  yarn dlx jsr add @muybuen/type
  // or
  pnpm dlx jsr add @muybuen/type


  import { buenTypeTailwind } from "@muybuen/type";

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    //  ...
    plugins: [
      buenTypeTailwind
    ]
  };

Customize the plugin with your own type definitions for customHeadlines andcustomTexts styles. You can also create classAliases for custom class names.


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

  const customTexts = {
    'body': {
      classAlias: 'article-body',
      fontFamily: "'Inter', 'sans-serif'",
      fontWeight: 'normal',
      fontSize: '1.1rem',
      letterSpacing: '0em',
      lineHeight: 1.5,
      textTransform: 'none',
    },
    // other text styles
  }

USAGE

Use the custom classes in your components to style your text.


  export const SomeComponent = () => (
    <div>
      <h1 className="headline-display-xl">Hello World</h1>
      <p className="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  );