\n
\n
\n```\n\n## Demo\n\nhttps://gladeye-tailwind-fluid-plugin.vercel.app/\n\n## Setup\n\nIn your globals.css add the following\n\n```css\n@import \"tailwindcss\";\n@plugin \"@gladeye/tailwind-fluid-plugin\";\n\n@theme {\n /* the Figma design for the smallest screen size */\n --breakpoint-design-min: 320px;\n /* the Figma design for the largest screen size */\n --breakpoint-design-max: 1320px;\n /* the Figma design for the smallest container size */\n --breakpoint-c-min: 2rem;\n /* the Figma design for the largest container size */\n --breakpoint-c-max: 10rem;\n /* the smallest breakpoint to which the fluid scaling scales to */\n --breakpoint-clamp-min: 320px;\n /* the largest breakpoint to which the fluid scaling scales to */\n --breakpoint-clamp-max: 1680px;\n}\n```\n\n### Custom Fluid Scaling Variables\n\nYou can define custom fluid scaling variables in your `@theme` section that will be automatically calculated and available throughout your application. This is useful for values that need to scale fluidly but are used in multiple places.\n\n```css\n@theme {\n /* Define the breakpoints for your fluid variable, if omitted it will default to --breakpoint-design-min/max values */\n --fluid-site-gutter-breakpoint-design-min: 320px;\n --fluid-site-gutter-breakpoint-design-max: 1320px;\n /* Define the fluid scaling clamp breakpoints for your fluid variable, if omitted it will default to --breakpoint-clamp-min/max values */\n --fluid-site-gutter-breakpoint-clamp-min: 320px;\n --fluid-site-gutter-breakpoint-clamp-max: 1680px;\n /* Define the values for your fluid variable */\n --fluid-site-gutter-value-min: 16px;\n --fluid-site-gutter-value-max: 24px;\n\n /* Adding them to the \"spacing\" namespace makes \"sgs\" available for utility classes, e.g \"ml-sgs */\n --spacing-sgs: var(--fluid-site-gutter);\n}\n```\n\nThe plugin will automatically:\n\n1. Calculate the fluid scaling between the min and max values\n2. Create a CSS variable named `--fluid-{name}` that you can reference\n3. Apply the fluid scaling based on the defined breakpoints\n\nThe naming convention for the theme variables is:\n\n- `--fluid-{name}-breakpoint-design-min`: The minimum breakpoint, if omitted it will default to `--breakpoint-design-min` value\n- `--fluid-{name}-breakpoint-design-max`: The maximum breakpoint, if omitted it will default to `--breakpoint-design-max` value\n- `--fluid-{name}-breakpoint-clamp-min`: The smallest breakpoint to which the fluid scaling scales to\n- `--fluid-{name}-breakpoint-clamp-max`: The largest breakpoint to which the fluid scaling scales to\n- `--fluid-{name}-value-min`: The minimum value\n- `--fluid-{name}-value-max`: The maximum value\n\nThe resulting fluid variable will be available as `--fluid-{name}`.\n\n### Supported Properties\n\n#### Container and Screen Sizes\n\n- [container sizes](https://tailwindcss.com/docs/responsive-design#container-size-reference)\n- [screen sizes](https://tailwindcss.com/docs/responsive-design#fluid-sizing)\n\n#### Tailwind Properties\n\n- `inset`\n- `top`\n- `right`\n- `bottom`\n- `leading`\n- `left`\n- `w`\n- `h`\n- `max-w`\n- `max-h`\n- `min-w`\n- `min-h`\n- `text`\n- `tracking`\n- `space-x`\n- `space-y`\n- `p`\n- `pt`\n- `pr`\n- `pb`\n- `pl`\n- `px`\n- `py`\n- `m`\n- `mt`\n- `mr`\n- `mb`\n- `ml`\n- `mx`\n- `my`\n- `gap`\n- `gap-x`\n- `gap-y`\n- `size`\n\n## How It Works\n\nThe plugin calculates fluid values using CSS `clamp()` to create smooth transitions between breakpoints. For example, if you use:\n\n```html\n
\n```\n\nThe plugin will:\n\n1. Convert the values to pixels\n2. Calculate the appropriate scaling ratio\n3. Generate a CSS clamp function that smoothly transitions between the values\n4. Apply the fluid scaling at the specified breakpoints\n\n## Browser Support\n\nThis plugin uses CSS `clamp()` which is supported in all modern browsers. For browser compatibility details, check [Can I Use](https://caniuse.com/?search=clamp).\n","readmeFilename":"README.md"}