npm package: @deck9/tailwindcss-recursive-font-helper
Description: This plugin adds utilities to control the different styling axes of the variable font Recursive
Author: Philipp Reinking
Latest version: 1.0.1

# @deck9/tailwindcss-recursive-font-helper

This is a plugin for TailwindCSS. It provides new utilities to control the different styling axes of the Recursive font.

![Example of usage of recursive font utility classes](/images/example.png)

## Setup Font

 - [Recursive Variable Font](https://github.com/arrowtype/recursive)

I recommend downloading the font from the Recursive Font website and host it in your project.

Use the `@font-face` rule to include the font into your project.

```css
@font-face {
  font-family: 'Recursive var';
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
  src: url("./fonts/Recursive_VF.woff2") format("woff2");
}
```

Also make sure, that you extend your `tailwind.config.js` file, to use the loaded font in the right places.

```js
// tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Recursive var", ...defaultTheme.fontFamily.sans],
      },
    }
  },
}
```

## Install

Install the plugin from npm:

```
# Using npm
npm install --save @deck9/tailwindcss-recursive-font-helper

# Using yarn
yarn add @deck9/tailwindcss-recursive-font-helper
```

Then add the plugin to your `tailind.config.js` file

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@deck9/tailwindcss-recursive-font-helper'),
  ],
}
```

## Usage

You can use the added utilities like any other utility in tailwindCSS. Just use the classes where the Recursive font is active.

```html
<div class="font-sans">
  <span class="italic-intense mono-10 casual-25">This is italic text</span>
</div>
```

| utility          | effect           |
|------------------|------------------|
| italic-mild      | "slnt"-5;        |
| italic           | "slnt"-10;       |
| italic-intense   | "slnt"-15;       |
| cursive-off      | "CRSV"0          |
| cursive-auto     | "CRSV"0.5        |
| cursive-on       | "CRSV"1          |
| mono\|casual-0   | "MONO\|CASL"0    |
| mono\|casual-10  | "MONO\|CASL"0.1  |
| mono\|casual-20  | "MONO\|CASL"0.2  |
| mono\|casual-25  | "MONO\|CASL"0.25 |
| mono\|casual-30  | "MONO\|CASL"0.4  |
| mono\|casual-40  | "MONO\|CASL"0.4  |
| mono\|casual-50  | "MONO\|CASL"0.5  |
| mono\|casual-60  | "MONO\|CASL"0.6  |
| mono\|casual-70  | "MONO\|CASL"0.7  |
| mono\|casual-75  | "MONO\|CASL"0.75 |
| mono\|casual-80  | "MONO\|CASL"0.8  |
| mono\|casual-90  | "MONO\|CASL"0.9  |
| mono\|casual-100 | "MONO\|CASL"1    |

## Configuration

You can configure which values and variants are generated by this plugin under the recursiveFontHelper key in your `tailwind.config.js` file.

The values do affect the `.mono-{val}` and `.casual-{val}` classes. The `.italic` and `.cursive` utilities are not configurable right now.

```js
// tailwind.config.js
module.exports = {
  theme: {
    recursiveFontHelper: {
      0: '0',
      5: '5',
      10: '10',
      15: '15',
    }
  },
  variants: {
    recursiveFontHelper: ['responsive', 'hover']
  }
}
```