{"id":13480239,"url":"https://github.com/darrenjacoby/tailwindcss-fl","last_synced_at":"2025-03-27T10:31:11.769Z","repository":{"id":47637424,"uuid":"258976599","full_name":"darrenjacoby/tailwindcss-fl","owner":"darrenjacoby","description":"TailwindCSS plugin to generate fluid utility classes using existing config","archived":true,"fork":false,"pushed_at":"2021-08-25T17:40:11.000Z","size":101,"stargazers_count":32,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T06:06:16.279Z","etag":null,"topics":["css","postcss","tailwind","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darrenjacoby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-26T08:16:31.000Z","updated_at":"2024-06-10T15:56:01.000Z","dependencies_parsed_at":"2022-09-15T22:10:37.206Z","dependency_job_id":null,"html_url":"https://github.com/darrenjacoby/tailwindcss-fl","commit_stats":null,"previous_names":["soberwp/tailwindcss-fl"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjacoby%2Ftailwindcss-fl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjacoby%2Ftailwindcss-fl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjacoby%2Ftailwindcss-fl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrenjacoby%2Ftailwindcss-fl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darrenjacoby","download_url":"https://codeload.github.com/darrenjacoby/tailwindcss-fl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826812,"owners_count":20678862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","postcss","tailwind","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:36.178Z","updated_at":"2025-03-27T10:31:11.372Z","avatar_url":"https://github.com/darrenjacoby.png","language":"CSS","readme":"# tailwindcss-fl\n\nTailwindCSS plugin to generate fluid utility classes by leveraging existing config.\n\n### Motivation\n\n* Increase productivity by writing less markup\n* Increase readability with more concise class lists\n* Increase consistency by using ratios to scale down\n* Enable smooth scaling between sizes rather than sizes jumping between breakpoints\n\n**Media query classes**\n```html\n\u003cdiv class=\"m-4 lg:m-6 xl:m-8 max-w-sm lg:max-w-lg xl:max-w-xl\"\u003e\n    \u003ch2 class=\"text-base lg:text-2xl xl:text-4xl\"\u003e\n        \u003c!-- --\u003e\n    \u003c/h2\u003e\n\u003c/div\u003e\n```\n\n**Fluid classes**\n```html\n\u003cdiv class=\"fl-m-8 fl-max-w-xl\"\u003e\n    \u003ch2 class=\"fl-text-4xl\"\u003e\n        \u003c!-- --\u003e\n    \u003c/h2\u003e\n\u003c/div\u003e\n```\n\n### Installation\n\n```shell\n$ npm install tailwindcss-fl\n```\n\nAdd to `tailwind.config.js`\n\n```js\nmodule.exports = {\n    plugins: [\n        require('tailwindcss-fl')({\n            screenMin: 'screens.sm',\n            screenMax: 'screens.xl',\n            defaultRatio: 1.618,\n        }),\n    ],\n}\n```\n\n### Utilities\n\nOut the box, the following classes are generated.\n\nKey | Classes\n--- | -------\n**`fontSize`** | `fl-text-{ keys }`\n**`margin`** | `fl-{ m, mt, mr, mb, ml, mx, my, -m, -mt, -mr, -mb, -ml, -mx, -my }-{ keys }`\n**`padding`** | `fl-{ p, pt, pr, pb, pl, px, py }-{ keys }`\n**`space`** | `fl-{ space-x, space-y }-{ keys }`\n**`gap`** | `fl-gap-{ keys }`\n**`width`** | `fl-w-{ keys }`\n**`maxWidth`** | `fl-max-w-{ keys }`\n**`height`** | `fl-h-{ keys }`\n**`top/right/bottom/left/inset`** | `fl-{top, right, bottom, left, inset, -top, -right, -bottom, -left, -inset}-{ keys }`\n**`borderWidth`** | `fl-border-{t, r, b, l}-{ keys }`\n**`borderRadius`** | `fl-rounded-{ keys }`\n\nCustom classes defined in `tailwind.config.js` under `theme: {}` will be used to generate the fluid utility classes.\n\n**[List of generated classes using the default provided by tailwind](.github/DEFAULT.md)**\n\n### Config\n\nBelow is the full default config.\n\n```js\n{\n    prefix: 'fl',\n    separator: '-',\n    defaultRatio: 1.618,\n    screenMin: 'screens.sm',\n    screenMax: 'screens.xl',\n    rootRem: 16,\n    clamp: true,\n    extend: true,\n    variants: [],\n    theme: { },\n}\n```\n\nOption | Type | Description\n------ | ---- | -----------\n**`prefix`** | `String` | Class name prefix for fluid classes.\n**`separator`** | `String` | Class name sepator for fluid classes.\n**`defaultRatio`** | `Number` | Scale down using golden ratio `1.618`.\n**`screenMin`** | `Array` | Screen size to scale from. `screens.{key}` or custom `rem/px` value.\n**`screenMax`** | `Array` | Screen size to scale to. `screens.{key}` or custom `rem/px` value.\n**`rootRem`** | `Number` | `1rem` is equal to `16px`. Default should work for most cases.\n**`clamp`** | `Boolean` | Enable the use of [`clamp()`](https://caniuse.com/css-math-functions) to avoid using media queries.\n**`extend`** | `Boolean` or `Array` | Extend existing class values, or provide an array of keys to extend, `['margin', 'padding']`.\n**`variants`** | `Array` | Tailwind variants, not recommended.\n**`theme`** | `Object` | Detailed in depth below.\n\n### Theme\n\n`theme: { }` allows for more fine-tuned control of fluid classes.\n\n#### Using `defaultRatio` only\n\nDefine a `defaultRatio` to be applied to all classes under a specific key.\n\n```js\ntheme: {\n    maxWidth: 2,\n    padding: 1.5,\n},\n```\n\nThe default ratios are applied to classes `fl-max-w-{ keys }` and `fl-{ p, pt, pr, pb, pl, px, py }-{ keys }`\n\n**[List of generated classes with properties and ratios](.github/RATIO.md)**\n\n#### Using `defaultRatio` and/or a custom config\n\nFor more control, a config object can be used to target specific utility classes, the same way tailwind does. \n\nThis is especially useful for `fontSize` because smaller font sizes should not scale down much.\n\n```js\ntheme: {\n    fontSize: {\n        defaultRatio: 1.125,\n        config: {\n            'base': 1.125,\n            'lg': 1.125,\n            'xl': 1.25,\n            '2xl': 1.25,\n            '3xl': 1.35,\n            '4xl': 1.35,\n            '5xl': 1.5,\n            '6xl': 1.5,\n        },\n    },\n},\n```\n\nClass names can be grouped for the same ratio. \n\n```js\ntheme: {\n    fontSize: {\n        defaultRatio: 1.125,\n        config: {\n            'base lg': 1.125,\n            'xl 2xl': 1.25,\n            '3xl 4xl': 1.35,\n            '5xl 6xl': 1.618,\n        },\n    },\n},\n```\n\nThe custom ratios are applied to classes `fl-text-{ keys }`\n\n**[List of generated classes with properties and ratios](.github/CONFIG.md)**\n\n#### Passing an array to custom config\n\nThe power of the plugin is extending existing utilities using ratios.\n\nHowever, an array of `[min, max, screenMin, screenMax]` can also be passed, either to overwrite an existing class, or to create a new custom class.\n\nParameters are based on **[postcss-range-value](https://github.com/soberwp/postcss-range-value)**.\n\nParam | Type | Description\n----- | ---- | -----------\n**`min(required)`** | `String` or `Number` | `rem/px` value or a scale down ratio\n**`max(required)`** | `String` or `Number` | `rem/px` value or a scale up ratio\n**`screenMin`** | `String` | `screens.{key}` or `rem/px` value\n**`screenMax`** | `String` | `screens.{key}` or `rem/px` value\n\nSome examples below\n\n```js\ntheme: {\n    maxWidth: {\n        defaultRatio: 2,\n        config: {\n            /* scale down by 2x resulting in 12rem to 24rem between default screen sizes */\n            '12/24': [2, '24rem'],\n\n            /* scale up by 2x resulting in 24rem to 48rem between default screen sizes */\n            '24/48': ['24rem', 2],\n\n            /* scale from 32rem to 64rem between screens.md and screens.lg */\n            '32/64': ['32rem', '64rem', 'screens.md', 'screens.lg'],\n        },\n    },\n},\n```\nThe custom values are added to classes `fl-max-w-{ keys }`\n\n**[List of generated classes with properties and ratios](.github/CONFIGARRAY.md)**\n\n### Support\n\nFollow [@withjacoby](https://twitter.com/withjacoby)\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrenjacoby%2Ftailwindcss-fl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarrenjacoby%2Ftailwindcss-fl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrenjacoby%2Ftailwindcss-fl/lists"}