proto-tailwindcss-pixels v0.0.320
Pixel Dimensions for Tailwind CSS
This plugin allows you to quickly generate pixel classes for Tailwind CSS.
Requirements
This plugin requires Tailwind CSS 2.2.2 or later.
Installation
yarn add proto-tailwindcss-pixels
Usage
The following plugin options are available. See below how these are passed (via an object) to the plugin in your tailwind.config.js
.
Supported Tags
This plugin currently support the following tags in Options:
const tags = [
'fontSize',
'height',
'lineHeight',
'maxHeight',
'maxWidth',
'minHeight',
'minWidth',
'spacing',
'width',
]
Specifying any of those in options will generate pixel classes as shown below.
CAVEAT: if you want the full 900 pixel variations to be generated, you have to pass an empty object in the options:
width: {},
The plugin no longer generates width & height by default, you must specify which tags you want to generate...
Options Available
You can pass along number values to define the range of the generated sizes.
start: number, // defaults to 0
stop: number, // defaults to 900
For example:
// tailwind.config.js
module.exports = {
plugins: [
// Generate 10 widths and 3 heights in pxs
require('proto-tailwindcss-pixels')({
width: {
stop: 10,
},
height: {
stop: 10,
start: 8,
},
}),
],
};
The above configuration would roughly 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-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.
9 days ago
10 days ago
12 days ago
16 days ago
17 days ago
18 days ago
18 days ago
19 days ago
24 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
12 months ago
12 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago