{"id":18500033,"url":"https://github.com/vicgutt/tailwindcss-feature-detection","last_synced_at":"2026-04-30T09:32:37.824Z","repository":{"id":57169152,"uuid":"378704019","full_name":"VicGUTT/tailwindcss-feature-detection","owner":"VicGUTT","description":"An easy way to add feature detection to your TailwindCSS project","archived":false,"fork":false,"pushed_at":"2021-06-20T17:46:38.000Z","size":162,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T16:05:30.782Z","etag":null,"topics":["browser-detection","feature-detection","feature-query","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/VicGUTT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-20T17:33:18.000Z","updated_at":"2022-01-30T07:40:06.000Z","dependencies_parsed_at":"2022-09-14T04:04:15.829Z","dependency_job_id":null,"html_url":"https://github.com/VicGUTT/tailwindcss-feature-detection","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VicGUTT%2Ftailwindcss-feature-detection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VicGUTT%2Ftailwindcss-feature-detection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VicGUTT%2Ftailwindcss-feature-detection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VicGUTT%2Ftailwindcss-feature-detection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VicGUTT","download_url":"https://codeload.github.com/VicGUTT/tailwindcss-feature-detection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239218862,"owners_count":19601955,"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":["browser-detection","feature-detection","feature-query","tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-06T13:48:14.264Z","updated_at":"2026-04-30T09:32:37.758Z","avatar_url":"https://github.com/VicGUTT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# An easy way to add feature detection to your [TailwindCSS](https://tailwindcss.com) project\n\nThis plugin allows you to easily add CSS feature detection to your project either by making use of the [`@supports` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) or by adding a class to your HTML.\nHere's a quick example:\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n    theme: {\n        // ...\n    },\n    variants: {\n        extend: {\n            grid: ['has-grid-support'],\n            gridTemplateColumns: ['has-grid-support'],\n            display: ['ie-😱'],\n        },\n    },\n    plugins: [\n        require('@vicgutt/tailwindcss-feature-detection')([\n            {\n                name: 'ie-😱',\n                strategy: 'class',\n            },\n            {\n                name: 'has-grid-support',\n                strategy: 'atRule',\n                atRule: {\n                    name: 'supports',\n                    params: '(display: grid) and (gap: 1em)',\n                },\n            },\n        ]),\n    ],\n};\n```\n\n```html\n\u003chtml class=\"ie-😱\"\u003e\n    ...\n\n    \u003csection class=\"flex has-grid-support:grid has-grid-support:grid-cols-3 ie-😱:hidden\"\u003e\n        ...\n    \u003c/section\u003e\n\u003c/html\u003e\n```\n\n**Output**\n\n```css\n/* Well actually it'll be resolved into \".ie-\\1F631 .ie-\\1F631\\:hidden\" but let's pretend 👀 */\n.ie-\\😱 .ie-\\😱\\:hidden {\n    display: none;\n}\n\n@supports (display: grid) and (gap: 1em) {\n    .has-grid-support\\:grid {\n        display: grid\n    }\n    .has-grid-support\\:grid-cols-3 {\n        grid-template-columns: repeat(3, minmax(0, 1fr))\n    }\n}\n```\n\n## Installation\n\nInstall the plugin via NPM _(or yarn)_:\n\n``` bash\n# Using npm\nnpm i @vicgutt/tailwindcss-feature-detection\n\n# Using Yarn\nyarn add @vicgutt/tailwindcss-feature-detection\n```\n\nThen add the plugin to your tailwind.config.js file:\n\n``` js\n// tailwind.config.js\n\nmodule.exports = {\n    plugins: [\n        require('@vicgutt/tailwindcss-feature-detection')([]),\n    ],\n};\n```\n\n## Configuring the variants\n\nThe plugin expects an array of variants to be passed in. Each variant is an object that can have the follwing properties:\n\n| Property             | Required                             | Type                 | Description |\n| -------------------- | ------------------------------------ | -------------------- | ----------- |\n| name                 | true                                 | string               | The Tailwind variant name.  \n| strategy             | true                                 | 'class' \\| 'atRule'  | The \"strategy\" to use when registering the variant. Should it require a class on the HTML or make use of feature queries.\n| atRule               | true if strategy === 'atRule'        | postcss's \"[AtRuleProps](https://postcss.org/api/#atruleprops)\" \\| undefined | Configuring the at-rule.\n| parentClassName      | false even when strategy === 'class' | string \\| undefined  | Specifying the class that will be set in the HTML code. If it is not defined, the variant's name will be used.\n| enabled              | false                                | boolean \\| undefined | Whether or not this variant should be skipped.\n\nAnd postcss's \"AtRuleProps\" object can have the follwing properties:\n\n| Property     | Required      | Type                            | Description |\n| ------------ | ------------- | ------------------------------- | ----------- |\n| name         | true          | string                          | Name of the at-rule.\n| params       | false         | string \\| number \\| undefined   | Parameters following the name of the at-rule.\n| raws         | false         | [AtRuleRaws](https://postcss.org/api/#atruleraws) \\| undefined         | Information used to generate byte-to-byte equal node string as it was in the origin input.\n\n## Provided defaults\n\nA set of default variants are conveniently provided. To know what those defaults are, please take a look at the [src/defaults.ts](https://github.com/VicGUTT/tailwindcss-feature-detection/blob/main/src/defaults.ts) file.\n\nThen in your tailwind.config.js file:\n\n``` js\n// tailwind.config.js\n\nmodule.exports = {\n    plugins: [\n        require('@vicgutt/tailwindcss-feature-detection')(require('@vicgutt/tailwindcss-feature-detection/dist/defaults')),\n    ],\n};\n```\n\n\u003c!-- ## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. --\u003e\n\n## Contributing\n\nIf you're interested in contributing to the project, please read our [contributing docs](https://github.com/VicGUTT/tailwindcss-feature-detection/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicgutt%2Ftailwindcss-feature-detection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvicgutt%2Ftailwindcss-feature-detection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvicgutt%2Ftailwindcss-feature-detection/lists"}