Skip to content

Latest commit

 

History

History
122 lines (97 loc) · 3 KB

README.MD

File metadata and controls

122 lines (97 loc) · 3 KB

@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

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