Pixel Dimensions for Tailwind CSS

This plugin allows you to quickly generate widths and heights in pixels.

Requirements

This plugin requires Tailwind CSS 1.2 or later.

Installation

yarn add tailwindcss-pixel-dimensions

Usage

The following plugin options are available. See below how these are passed (via an object) to the plugin in your tailwind.config.js.

Options Available

Pass along a number value to generate that many font sizes.

// tailwind.config.js
module.exports = {
  plugins: [
    // Generates 10 widths and heights in pxs
    require('tailwindcss-pixel-dimensions')({
        width: {
          total: 10, // 900 is the default
          // startingSize: 0, // default
        },
        height: {
          total: 10, // 900 is the default
          // startingSize: 0, // default
        },
    }),
  ],
};

The above configuration would generate the following CSS:

.w-0px {
  width: 0;
}

.w-1px {
  width: 1px;
}

.w-2px {
  width: 2px;
}

.w-3px {
  width: 3px;
}

.w-4px {
  width: 4px;
}

.w-5px {
  width: 5px;
}

.w-6px {
  width: 6px;
}

.w-7px {
  width: 7px;
}

.w-8px {
  width: 8px;
}

.w-9px {
  width: 9px;
}

.w-10px {
  width: 10px;
}

.h-0px {
  height: 0;
}

.h-1px {
  height: 1px;
}

.h-2px {
  height: 2px;
}

.h-3px {
  height: 3px;
}

.h-4px {
  height: 4px;
}

.h-5px {
  height: 5px;
}

.h-6px {
  height: 6px;
}

.h-7px {
  height: 7px;
}

.h-8px {
  height: 8px;
}

.h-9px {
  height: 9px;
}

.h-10px {
  height: 10px;
}
/* etc. */

Which you can then use in your HTML like this:

<div class="h-10px">
  I'm a div with a height of 10 pixels or pickles depending on how you pronounce it.
</div>

The above depends on the order of the generated CSS.