https://github.com/dylanvann/twind-plugin-capsize

Capsize plugin for Twind.
https://github.com/dylanvann/twind-plugin-capsize

Last synced: 27 days ago
JSON representation

Capsize plugin for Twind.

• Host: GitHub
• URL: https://github.com/dylanvann/twind-plugin-capsize
• Owner: DylanVann
• Created: 2021-04-12T13:49:07.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-04-12T14:32:35.000Z (over 3 years ago)
• Last Synced: 2024-08-10T09:05:36.170Z (3 months ago)
• Language: TypeScript
• Size: 4.88 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# twind-plugin-capsize

[Capsize](https://github.com/seek-oss/capsize) integration for [Twind](https://github.com/tw-in-js/twind).

## Usage

### Setup

```js

import { setup } from 'twind'

import { twindPluginCapsize } from 'twind-plugin-capsize'

setup({

  theme: {

    fontFamily: {

      // Add the font.

      main: ['Roboto', 'sans-serif'],

    },

  },

  plugins: {

    ...typography(),

    // Pass in the font metrics.

    // Find the metrics for your font on https://seek-oss.github.io/capsize/

    'cap-main': twindPluginCapsize({

      capHeight: 1456,

      ascent: 1900,

      descent: -500,

      lineGap: 0,

      unitsPerEm: 2048,

    }),

  },

})

```

### Use

Note: It is currently assumed your font sizes and line heights are specified in rem.

```tsx

import {tw} from 'twind'

const className = tw`cap-main`

// Use font sizes from your theme.

// Corresponding line height will also be read.

const className = tw`cap-main-xl`

// Use font size and line height from theme.

const className = tw`cap-main-xl-7`

```