@deck9/tailwindcss-recursive-font-helper v1.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.

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>

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']
  }
}