Tailwind Fluid Scaling Examples
Syntax
Viewport Syntax
CSS
{property}-fluid-[{breakpoint1}={value1},{breakpoint2}={value2},...]{property}-fluid-[{value1},{value2}]Container Syntax
CSS
{property}-fluid-[@{containerName},{breakpoint1}={value1},{breakpoint2}={value2},...]{property}-fluid-[@{containerName},{value1},{value2}]Parameters
{property}is the CSS property to scale (see supported properties below)
{containerName}is the name of the container to scale the property for. This is required for container query scaling.
{breakpoints}are your defined screen/container sizes (sm, md, lg, etc.)
If the breakpoint is omitted, the plugin will use the min/max breakpoints defined in the @theme section
Values can be Tailwind theme spacing values or explicit dimensions(px or rem)
Example Classes
HTML
/* Using Tailwind spacing units */<div className="mb-fluid-[4,6]"/>/* Using pixel units */<div className="mb-fluid-[10px,23px]"/>/* Using rem units */<div className="mb-fluid-[3rem,6rem]"/>/* Using container query */<div className="@container"> <div className="h-fluid-[@container,100px,300px]"/></div>/* Using named container query */<div className="@container/foo"> <div className="h-fluid-[@container/foo,100px,300px]"/></div>Examples
HTML
<div className="relative h-40"> <div className="absolute bottom-fluid-[2,4] left-0 w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>HTML
<div className="relative h-40"> <div className="absolute bottom-fluid-[10px,18px] left-0 w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>HTML
<div className="relative h-40"> <div className="absolute bottom-fluid-[1rem,3rem] left-0 w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>HTML
<div className="grid grid-cols-2 gap-fluid-[10px,30px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="grid grid-cols-2 gap-x-fluid-[10px,30px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="grid grid-cols-2 gap-y-fluid-[10px,30px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="h-fluid-[100px,300px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="relative h-40"> <div className="absolute inset-fluid-[0px,60px] rounded w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>HTML
<div className="relative h-40"> <div className="absolute left-fluid-[20px,60px] top-0 w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>Fluid Margin
HTML
<div className="m-fluid-[10.55px,300.5px] bg-blue-700 rounded p-4"> Fluid Margin</div>HTML
<div className="max-h-fluid-[200px,500px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="max-w-fluid-[300px,800px] bg-blue-700 rounded p-4"> ...</div>Margin Bottom
HTML
<div className="mb-fluid-[10px,30px] bg-blue-700 rounded p-4"> Margin Bottom</div>Margin Left
HTML
<div className="ml-fluid-[10px,30px] bg-blue-700 rounded p-4"> Margin Left</div>Margin Right
HTML
<div className="mr-fluid-[10px,30px] bg-blue-700 rounded p-4"> Margin Right</div>Margin Top
HTML
<div className="mt-fluid-[10px,30px] bg-blue-700 rounded p-4"> Margin Top</div>Margin X
HTML
<div className="mx-fluid-[10px,30px] bg-blue-700 rounded p-4"> Margin X</div>Fluid Margin Y
HTML
<div className="my-fluid-[10px,300px] bg-blue-700 rounded p-4"> Fluid Margin Y</div>Padding
HTML
<div className="p-fluid-[10px,30px] bg-blue-700 rounded p-4"> Padding</div>Padding Bottom
HTML
<div className="pb-fluid-[10px,30px] bg-blue-700 rounded p-4"> Padding Bottom</div>Fluid Padding
HTML
<div className="pl-fluid-[10px,90px] bg-blue-700 rounded p-4"> Fluid Padding</div>Padding Right
HTML
<div className="pr-fluid-[10px,30px] bg-blue-700 rounded p-4"> Padding Right</div>Padding Top
HTML
<div className="pt-fluid-[10px,30px] bg-blue-700 rounded p-4"> Padding Top</div>Fluid Padding X
HTML
<div className="px-fluid-[10px,30px] bg-blue-700 rounded p-4"> Fluid Padding X</div>Padding Y
HTML
<div className="py-fluid-[10px,30px] bg-blue-700 rounded p-4"> Padding Y</div>HTML
<div className="relative h-40"> <div className="absolute right-fluid-[0px,60px] w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>HTML
<div className="flex space-x-fluid-[10px,30px] bg-blue-700 rounded p-4"> ...</div>HTML
<div className="space-y-fluid-[10px,30px] bg-blue-700 rounded p-4"> ...</div>Fluid Text
HTML
<div className="text-fluid-[16px,132px] bg-blue-700 rounded p-4"> Fluid Text</div>HTML
<div className="relative h-40"> <div className="absolute top-fluid-[20px,60px] w-10 h-10 bg-blue-700 rounded p-4"> ...</div></div>Fluid Letter Spacing
HTML
<div className="tracking-fluid-[10.5px,102px] bg-blue-700 rounded p-4"> Fluid Letter Spacing</div>HTML
<div className="w-fluid-[30px,600px] bg-blue-700 rounded p-4"> ...</div>Child Element
HTML
<div className="@container"> <div className="mt-fluid-[@container,10px,100px] bg-blue-700 rounded p-4"> Child Element</div></div>Child Element
HTML
<div className="@container/foo"> <div className="mt-fluid-[@container/foo,10px,100px] bg-blue-700 rounded p-4"> Child Element</div></div>Child Element
HTML
<div className="@container/test"> <div className="mt-fluid-[@container/test,@3xs=100px,@3xl=400px] bg-blue-700 rounded p-4"> Child Element</div></div>