TMBR Tailwind

A Tailwind CSS plugin that generates utility classes for fluid properties using clamp(). Heavily inspired by fluid-tailwindcss.

Installation

npm install @tmbr/tailwind

@import 'tailwindcss';
@plugin '@tmbr/tailwind';

Override the default 375 and 1680 viewport values:

@import 'tailwindcss';
@plugin '@tmbr/tailwind' {
  vmin: 320;
  vmax: 1920;
};

Usage

All values are written as px and converted to rem:

<div class="f-p-[16,32]">
<!-- padding: clamp(1rem, 0.713rem + 1.23vw, 2rem) -->

<div class="f-text-[24,36]">
<!-- font-size: clamp(1.5rem, 1.284rem + 0.92vw, 2.25rem) -->

<div class="f-gap-[10,20]">
<!-- gap: clamp(0.625rem, 0.445rem + 0.77vw, 1.25rem) -->

Viewport Overrides

Override the default min viewport width (375), the max viewport width (1680), or both by passing additional values:

<!-- override both min and max-->
<div class="f-p-[16,32,400,800]">

<!-- override min (uses default max) -->
<div class="f-p-[16,32,400]">

<!-- override max (uses default min) - empty value without spaces -->
<div class="f-p-[16,32,,800]">

Negative values:

<div class="f-mt-[-16,-32]">
<!-- margin-top: clamp(-1rem, ..., -2rem) -->

Quick Reference

| Syntax | Output | |------------------------| --------------------------------------------------| | f-text-[16,20] | clamp(1rem, ..., 1.25rem) - px converted to rem | | f-p-[40,60,800,1200] | custom viewports (800-1200px, converted to rem) | | f-p-[20,30,,800] | default min, custom max | | f-p-[10,20,400] | custom min, default max | | f-mt-[-16,-32] | negative values |

Available Utilities

| Category | Utilities | |------------|-------------------------------------------------------------------------------------------| | Margin | f-m, f-mx, f-my, f-mt, f-mr, f-mb, f-ml | | Padding | f-p, f-px, f-py, f-pt, f-pr, f-pb, f-pl | | Typography | f-text, f-leading, f-tracking | | Sizing | f-w, f-h, f-size, f-min-w, f-max-w, f-min-h, f-max-h | | Gap | f-gap, f-gap-x, f-gap-y | | Position | f-inset, f-inset-x, f-inset-y, f-top, f-right, f-bottom, f-left | | Border | f-rounded, f-rounded-t/r/b/l, f-rounded-tl/tr/br/bl, f-border, f-border-t/r/b/l | | Flex | f-basis |