npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@domchristie/tailwind-utopia

v1.1.1

Published

A Tailwind CSS plugin to generate utility classes for interpolated fluid type and space scales.

Downloads

399

Readme

Tailwind Utopia

Elegantly scale type and space without breakpoints
utopia.fyi

A TailwindCSS plugin that generates fluid font-size and spacing utilities:

<h1 class="text-fl-3xl px-fl-2xs-md">Example</h1>
  • text-fl-3xl: sizes the text to 3xl
  • px-fl-2xs-md: applies horizontal padding; 2xs for the smallest devices, interpolated up to md for the largest

Installation

npm install -D @domchristie/tailwind-utopia

Getting Started

Require the plugin in your tailwind.config.js file and reference it in the plugins section.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // ...
    }
  },
  plugins: [require('@domchristie/tailwind-utopia')]
}

By default, this generates a fluid type scale and a fluid space scale with the same defaults as the Utopia calculators:

  • A type scale with 2 negative steps and 5 positive steps from a 21px base size at the minimum screen size of 320px up to a 24px base size at the maximum screen size of 1140px, with the modular scale being 1.2 (minor third) at the minimum screen size and 1.25 (major third) at the maximum screen size.
  • A spacing scale with t-shirt sizes from 3xs up to 3xl, and utilities for each space-value pair in the scale

Typographic Scale

The default font-size utility classes are as follows:

text-fl-xs
text-fl-sm
text-fl-base
text-fl-lg
text-fl-xl
text-fl-2xl
text-fl-3xl
text-fl-4xl

Spacing Scale

The default spacing utility classes are as follows:

<utility>-fl-3xs
<utility>-fl-2xs
<utility>-fl-xs
<utility>-fl-sm
<utility>-fl-md
<utility>-fl-lg
<utility>-fl-xl
<utility>-fl-2xl
<utility>-fl-3xl

These work with any utility classes that depend on the the spacing configuration, i.e. padding, margin, width, height, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding.

Examples:

m-fl-lg
gap-fl-3xs
-space-x-fl-sm

Space Value Pairs

Utilities will be generated for any space value pairs. Separate t-shirt sizes with a -. Examples:

pt-fl-3xs-2xs // single step
m-fl-sm-lg // sm - lg step

Customization

The plugin is a standard Tailwind plugin, with its defaults set using a theme object. So all the defaults can be extended within your Tailwind config file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      utopia: {
        // customization
      }
    }
  }
}

Below is the default theme used by the plugin:

minWidth: 320,
minSize: 21,
minScale: 1.2,
maxWidth: 1140,
maxSize: 24,
maxScale: 1.25,
fontSize: {
  xs: 'inherit',
  sm: 'inherit',
  base: 1.4,
  lg: 1.33,
  xl: 1.2,
  '2xl': 1.11,
  '3xl': 1,
  '4xl': 1
},
spacing: {
  '3xs': 0.25,
  '2xs': 0.5,
  xs: 0.75,
  sm: 1,
  md: 1.5,
  lg: 2,
  xl: 3,
  '2xl': 4,
  '3xl': 6
}
  • minWidth: the screen size the scale starts at in px (unitless integer)
  • minSize: the base font size at the minScreen size (unitless integer)
  • minScale: the modular scale to use for type sizes at minScreen size (decimal)
  • minScreen: the screen size at which the scale stops increasing in px (unitless integer)
  • maxSize: the base font size a the maxScreen size (unitless integer)
  • maxScale: the modular scale to use at the maxScreen size (decimal)
  • fontSize: the names, line-heights, and min/max text size configuration. The key determines the class name that will be generated. A non-object value will be used for the line-height. Alternatively, an object can configure the lineHeight and min/max values. For example:
    '4xl': {
      lineHeight: 0.88,
      min: 'var(--f-3xl-min)'
    }
    This overrides the 4xl size, bringing the min size down to that of 3xl. Unspecified values will use the defaults. Read Utopian CSS generator, an iteration for more on this approach.
  • spacing: the names and multipliers for the spacing scale

You can reference other parts of your theme config if desired (e.g. for using entries from your screens config). An example customization could look as follows:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      utopia: theme => ({
        minWidth: theme('screens.sm'),
        maxWidth: theme('screens.xl')
      })
    }
  }
}

Configuration

The plugin has the following options to configure the style of classes generated and how they are generated.

Apply configuration when calling the plugin in the Tailwind config:

// tailwind.config.js
module.exports = {
  // …
  plugins: [
    require('@domchristie/tailwind-utopia')({
      prefix: 'f-'
    })
  ]
}

prefix

The string that prefixes the utility class's value.

baseKey

Internally, the plugin needs to know which steps in your scale are negative and which are positive. This is done by identifying the base step in your scale. Any entries in the sizes array before the base are considered negative, all those after are positive.

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

Utopia: James Gilyead & Trys Mudford
Original Tailwind Utopia plugin: Chris Pymm & CWS Digital