@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.

Setup Font

• Recursive Variable Font

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.

@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.

// 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

// 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.

<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.

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