{"id":13480318,"url":"https://github.com/Larsklopstra/tailwindcss-css-filters","last_synced_at":"2025-03-27T10:32:36.783Z","repository":{"id":54305599,"uuid":"296858801","full_name":"Larsklopstra/tailwindcss-css-filters","owner":"Larsklopstra","description":"Expressive CSS filters for Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2021-03-04T18:38:13.000Z","size":27,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-01T17:21:38.741Z","etag":null,"topics":["tailwind","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Larsklopstra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["larsklopstra"]}},"created_at":"2020-09-19T11:58:48.000Z","updated_at":"2023-08-12T17:23:03.000Z","dependencies_parsed_at":"2022-08-13T11:31:04.414Z","dependency_job_id":null,"html_url":"https://github.com/Larsklopstra/tailwindcss-css-filters","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Larsklopstra%2Ftailwindcss-css-filters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Larsklopstra%2Ftailwindcss-css-filters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Larsklopstra%2Ftailwindcss-css-filters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Larsklopstra%2Ftailwindcss-css-filters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Larsklopstra","download_url":"https://codeload.github.com/Larsklopstra/tailwindcss-css-filters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222239289,"owners_count":16953912,"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":["tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:37.359Z","updated_at":"2024-10-30T14:30:22.037Z","avatar_url":"https://github.com/Larsklopstra.png","language":"JavaScript","funding_links":["https://github.com/sponsors/larsklopstra"],"categories":["Plugins"],"sub_categories":[],"readme":"![Tailwind CSS Filters](/docs/logo.svg)\n\n# Tailwind CSS Filters\n\nTranslations\n\n- [Portuguese](/docs/README-pt.md)\n\nTailwind CSS Filters is a expressive CSS filters for the utility-first framework [Tailwind CSS](https://tailwindcss.com).\n\n```html\n\u003cdiv class=\"filter filter-blur-2 filter-hue-rotate-90 sm:filter-blur-8\"\u003e\n  Some awesome filters\n\u003c/div\u003e\n```\n\n[View Demo](https://play.tailwindcss.com/ZADY1D8ltK)\n\n## Installation\n\nInstall the plugin from npm:\n\n```bash\n# Using npm\nnpm i --save-dev tailwindcss-css-filters\n\n# Using yarn\nyarn add -D tailwindcss-css-filters\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      hueRotate: {\n        8: '8deg',\n      },\n    },\n  },\n  plugins: [\n    require('tailwindcss-css-filters'),\n  ],\n}\n```\n\n## Usage\n\nNow you can use the `filter` classes to add some filters to your HTML elements and images.\n\n## Default Classes\n\n```css\n.filter\n.filter-blur-2\n.filter-blur-4\n.filter-blur-8\n.filter-blur-16\n.filter-blur-32\n.filter-blur-64\n\n.hover\\:filter-blur-2:hover\n.hover\\:filter-blur-4:hover\n.hover\\:filter-blur-8:hover\n.hover\\:filter-blur-16:hover\n.hover\\:filter-blur-32:hover\n.hover\\:filter-blur-64:hover\n.focus\\:filter-blur-2:focus\n.focus\\:filter-blur-4:focus\n.focus\\:filter-blur-8:focus\n.focus\\:filter-blur-16:focus\n.focus\\:filter-blur-32:focus\n.focus\\:filter-blur-64:focus\n\n.filter-brightness-0\n.filter-brightness-25\n.filter-brightness-50\n.filter-brightness-75\n.filter-brightness-100\n.hover\\:filter-brightness-0:hover\n.hover\\:filter-brightness-25:hover\n.hover\\:filter-brightness-50:hover\n.hover\\:filter-brightness-75:hover\n.hover\\:filter-brightness-100:hover\n.focus\\:filter-brightness-0:focus\n.focus\\:filter-brightness-25:focus\n.focus\\:filter-brightness-50:focus\n.focus\\:filter-brightness-75:focus\n.focus\\:filter-brightness-100:focus\n\n.filter-contrast-0\n.filter-contrast-25\n.filter-contrast-50\n.filter-contrast-75\n.filter-contrast-100\n.hover\\:filter-contrast-0:hover\n.hover\\:filter-contrast-25:hover\n.hover\\:filter-contrast-50:hover\n.hover\\:filter-contrast-75:hover\n.hover\\:filter-contrast-100:hover\n.focus\\:filter-contrast-0:focus\n.focus\\:filter-contrast-25:focus\n.focus\\:filter-contrast-50:focus\n.focus\\:filter-contrast-75:focus\n.focus\\:filter-contrast-100:focus\n\n.filter-drop-shadow-sm\n.filter-drop-shadow\n.filter-drop-shadow-md\n.filter-drop-shadow-lg\n.filter-drop-shadow-xl\n.filter-drop-shadow-2xl\n.hover\\:filter-drop-shadow-sm:hover\n.hover\\:filter-drop-shadow:hover\n.hover\\:filter-drop-shadow-md:hover\n.hover\\:filter-drop-shadow-lg:hover\n.hover\\:filter-drop-shadow-xl:hover\n.hover\\:filter-drop-shadow-2xl:hover\n.focus\\:filter-drop-shadow-sm:focus\n.focus\\:filter-drop-shadow:focus\n.focus\\:filter-drop-shadow-md:focus\n.focus\\:filter-drop-shadow-lg:focus\n.focus\\:filter-drop-shadow-xl:focus\n.focus\\:filter-drop-shadow-2xl:focus\n\n.filter-grayscale-0\n.filter-grayscale-25\n.filter-grayscale-50\n.filter-grayscale-75\n.filter-grayscale-100\n.hover\\:filter-grayscale-0:hover\n.hover\\:filter-grayscale-25:hover\n.hover\\:filter-grayscale-50:hover\n.hover\\:filter-grayscale-75:hover\n.hover\\:filter-grayscale-100:hover\n.focus\\:filter-grayscale-0:focus\n.focus\\:filter-grayscale-25:focus\n.focus\\:filter-grayscale-50:focus\n.focus\\:filter-grayscale-75:focus\n.focus\\:filter-grayscale-100:focus\n\n.filter-hue-rotate-0\n.filter-hue-rotate-60\n.filter-hue-rotate-90\n.filter-hue-rotate-120\n.filter-hue-rotate-150\n.filter-hue-rotate-180\n.filter-hue-rotate-210\n.filter-hue-rotate-240\n.filter-hue-rotate-270\n.filter-hue-rotate-300\n.filter-hue-rotate-330\n.hover\\:filter-hue-rotate-0:hover\n.hover\\:filter-hue-rotate-60:hover\n.hover\\:filter-hue-rotate-90:hover\n.hover\\:filter-hue-rotate-120:hover\n.hover\\:filter-hue-rotate-150:hover\n.hover\\:filter-hue-rotate-180:hover\n.hover\\:filter-hue-rotate-210:hover\n.hover\\:filter-hue-rotate-240:hover\n.hover\\:filter-hue-rotate-270:hover\n.hover\\:filter-hue-rotate-300:hover\n.hover\\:filter-hue-rotate-330:hover\n.focus\\:filter-hue-rotate-0:focus\n.focus\\:filter-hue-rotate-60:focus\n.focus\\:filter-hue-rotate-90:focus\n.focus\\:filter-hue-rotate-120:focus\n.focus\\:filter-hue-rotate-150:focus\n.focus\\:filter-hue-rotate-180:focus\n.focus\\:filter-hue-rotate-210:focus\n.focus\\:filter-hue-rotate-240:focus\n.focus\\:filter-hue-rotate-270:focus\n.focus\\:filter-hue-rotate-300:focus\n.focus\\:filter-hue-rotate-330:focus\n\n.filter-invert-0\n.filter-invert-25\n.filter-invert-50\n.filter-invert-75\n.filter-invert-100\n.hover\\:filter-invert-0:hover\n.hover\\:filter-invert-25:hover\n.hover\\:filter-invert-50:hover\n.hover\\:filter-invert-75:hover\n.hover\\:filter-invert-100:hover\n.focus\\:filter-invert-0:focus\n.focus\\:filter-invert-25:focus\n.focus\\:filter-invert-50:focus\n.focus\\:filter-invert-75:focus\n.focus\\:filter-invert-100:focus\n\n.filter-saturate-0\n.filter-saturate-25\n.filter-saturate-50\n.filter-saturate-75\n.filter-saturate-100\n.filter-saturate-125\n.filter-saturate-150\n.filter-saturate-175\n.filter-saturate-200\n.hover\\:filter-saturate-0:hover\n.hover\\:filter-saturate-25:hover\n.hover\\:filter-saturate-50:hover\n.hover\\:filter-saturate-75:hover\n.hover\\:filter-saturate-100:hover\n.hover\\:filter-saturate-125:hover\n.hover\\:filter-saturate-150:hover\n.hover\\:filter-saturate-175:hover\n.hover\\:filter-saturate-200:hover\n.focus\\:filter-saturate-0:focus\n.focus\\:filter-saturate-25:focus\n.focus\\:filter-saturate-50:focus\n.focus\\:filter-saturate-75:focus\n.focus\\:filter-saturate-100:focus\n.focus\\:filter-saturate-125:focus\n.focus\\:filter-saturate-150:focus\n.focus\\:filter-saturate-175:focus\n.focus\\:filter-saturate-200:focus\n\n.filter-sepia-0\n.filter-sepia-25\n.filter-sepia-50\n.filter-sepia-75\n.filter-sepia-100\n.filter-sepia-125\n.filter-sepia-150\n.filter-sepia-175\n.filter-sepia-200\n.hover\\:filter-sepia-0:hover\n.hover\\:filter-sepia-25:hover\n.hover\\:filter-sepia-50:hover\n.hover\\:filter-sepia-75:hover\n.hover\\:filter-sepia-100:hover\n.hover\\:filter-sepia-125:hover\n.hover\\:filter-sepia-150:hover\n.hover\\:filter-sepia-175:hover\n.hover\\:filter-sepia-200:hover\n.focus\\:filter-sepia-0:focus\n.focus\\:filter-sepia-25:focus\n.focus\\:filter-sepia-50:focus\n.focus\\:filter-sepia-75:focus\n.focus\\:filter-sepia-100:focus\n.focus\\:filter-sepia-125:focus\n.focus\\:filter-sepia-150:focus\n.focus\\:filter-sepia-175:focus\n.focus\\:filter-sepia-200:focus\n```\n\n### Example\n\n```html\n\u003ca href=\"/\"\u003e\n  \u003cimg class=\"filter filter-grayscale-0 hover:filter-grayscale-100\"\u003e\n\u003c/a\u003e\n```\n\n## Customization\n\n```js\nconst filters = [\n  {\n    name: 'blur',\n    theme: {\n      2: '2px',\n      4: '4px',\n      8: '8px',\n      16: '16px',\n      32: '32px',\n      64: '64px',\n    },\n  },\n  {\n    name: 'brightness',\n    theme: {\n      0: '0',\n      '1/4': '0.25',\n      '1/2': '0.5',\n      '3/4': '0.75',\n      1: '1',\n    },\n  },\n  {\n    name: 'contrast',\n    theme: {\n      0: '0',\n      '1/4': '0.25',\n      '1/2': '0.5',\n      '3/4': '0.75',\n      1: '1',\n    },\n  },\n  {\n    name: 'dropShadow',\n    theme: {\n      sm: '0 1px 2px rgba(0, 0, 0, 0.05)',\n      default: '0 1px 3px rgba(0, 0, 0, 0.1)',\n      md: '0 4px 6px rgba(0, 0, 0, 0.1)',\n      lg: '0 10px 15px rgba(0, 0, 0, 0.1)',\n      xl: '0 20px 25px rgba(0, 0, 0, 0.1)',\n      '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)',\n    },\n  },\n  {\n    name: 'grayscale',\n    theme: {\n      0: '0%',\n      '1/4': '0.25',\n      '1/2': '0.5',\n      '3/4': '0.75',\n      1: '1',\n    },\n  },\n  {\n    name: 'hueRotate',\n    theme: {\n      0: '0deg',\n      60: '60deg',\n      90: '90deg',\n      120: '120deg',\n      150: '150deg',\n      180: '180deg',\n      210: '210deg',\n      240: '240deg',\n      270: '270deg',\n      300: '300deg',\n      330: '330deg',\n    },\n  },\n]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLarsklopstra%2Ftailwindcss-css-filters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLarsklopstra%2Ftailwindcss-css-filters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLarsklopstra%2Ftailwindcss-css-filters/lists"}