futureman-tailwind-clamp-plugin
v1.0.0
Published
A Tailwind CSS plugin that provides utilities for clamp-based responsive design.
Downloads
6
Maintainers
Readme
Tailwind Clamp Plugin
A Tailwind CSS plugin that provides utilities for clamp-based responsive design.
Floor and Ceiling Assumptions
Scaling between 375px (mobile) and 3840px (4K) with a base text of 16px/1rem
Installation & Setup
First, install the plugin via npm:
npm install futureman-tailwind-clamp-plugin
Add the plugin to your tailwind.config file
module.exports = {
// Other configuration...
plugins: [
require('futureman-tailwind-clamp-plugin'),
// other plugins
],
};
Example Code
<div class="p-c-[1rem,2rem] mt-c-[10px,20px] text-c-[24px,36px,1.5,1.2]">
Responsive element with clamped padding, margin, and font-size.
</div>
// Usage For padding - default in px
p-c-[20,40]
p-c-[20px,40px]
p-c-[20rem,40rem]
p-c-[40px,200]
// Usage For Text - font size and line height
text-c-[24px,96px]
text-c-[24,96]
text-c-[2rem,5rem]
text-c-[24,36,1.5,1.2]
text-c-[24px,36px,1.5,1.2]
text-c-[2rem,4rem,2,1.5]
Supported Utilities
This plugin provides clamp
versions of various Tailwind CSS utilities. Here is a list of all supported utilities:
Padding
p-c
: clamp padding for all sidespt-c
: clamp padding-toppr-c
: clamp padding-rightpb-c
: clamp padding-bottompl-c
: clamp padding-leftpx-c
: clamp padding-left and padding-rightpy-c
: clamp padding-top and padding-bottom
Margin
m-c
: clamp margin for all sidesmt-c
: clamp margin-topmr-c
: clamp margin-rightmb-c
: clamp margin-bottomml-c
: clamp margin-leftmx-c
: clamp margin-left and margin-rightmy-c
: clamp margin-top and margin-bottom
Font Size
text-c
: clamp font-size and line-height
Letter Spacing
tracking-c
: clamp letter-spacing
Width & Height
w-c
: clamp widthh-c
: clamp heightsize-c
: clamp width and heightmin-w-c
: clamp min-widthmin-h-c
: clamp min-heightmax-w-c
: clamp max-widthmax-h-c
: clamp max-height
Gap
gap-c
: clamp gapgap-x-c
: clamp row-gapgap-y-c
: clamp column-gap
Position
left-c
: clamp lefttop-c
: clamp topright-c
: clamp rightbottom-c
: clamp bottom
Border Radius
rounded-c
: clamp border-radius