├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .prettierrc ├── README.md ├── docs ├── README-pt.md └── logo.svg ├── package-lock.json ├── package.json └── src ├── availableFilters.js ├── index.js ├── plugins ├── backdropFilters.js └── filters.js └── utils ├── generateBase.js └── generateFilters.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [larsklopstra] 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Expected Behavior 4 | 5 | 6 | 7 | ## Current Behavior 8 | 9 | 10 | 11 | ## Possible Solution 12 | 13 | 14 | 15 | ## Steps to Reproduce (for bugs) 16 | 17 | 18 | 1. 19 | 2. 20 | 3. 21 | 4. 22 | 23 | ## Context 24 | 25 | 26 | 27 | ## Your Environment 28 | 29 | * Version used: 30 | * Environment name and version (e.g. Chrome 39, node.js 5.4): 31 | * Operating System and version (desktop or mobile): 32 | * Link to your project: 33 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Related Issue 7 | 8 | 9 | 10 | 11 | 12 | ## Motivation and Context 13 | 14 | 15 | ## How Has This Been Tested? 16 | 17 | 18 | 19 | 20 | ## Screenshots (if appropriate): 21 | 22 | ## Types of changes 23 | 24 | - [ ] Bug fix (non-breaking change which fixes an issue) 25 | - [ ] New feature (non-breaking change which adds functionality) 26 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 27 | 28 | ## Checklist: 29 | 30 | 31 | - [ ] My code follows the code style of this project. 32 | - [ ] My change requires a change to the documentation. 33 | - [ ] I have updated the documentation accordingly. 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .cache 82 | 83 | # Next.js build output 84 | .next 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | dist 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and not Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | 111 | # Stores VSCode versions used for testing VSCode extensions 112 | .vscode-test 113 | 114 | ### VisualStudioCode ### 115 | .vscode/* 116 | !.vscode/settings.json 117 | !.vscode/tasks.json 118 | !.vscode/launch.json 119 | !.vscode/extensions.json 120 | *.code-workspace 121 | 122 | ### VisualStudioCode Patch ### 123 | # Ignore all local history of files 124 | .history 125 | 126 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 127 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Tailwind CSS Filters](/docs/logo.svg) 2 | 3 | # Tailwind CSS Filters 4 | 5 | Translations 6 | 7 | - [Portuguese](/docs/README-pt.md) 8 | 9 | Tailwind CSS Filters is a expressive CSS filters for the utility-first framework [Tailwind CSS](https://tailwindcss.com). 10 | 11 | ```html 12 |
13 | Some awesome filters 14 |
15 | ``` 16 | 17 | [View Demo](https://play.tailwindcss.com/ZADY1D8ltK) 18 | 19 | ## Installation 20 | 21 | Install the plugin from npm: 22 | 23 | ```bash 24 | # Using npm 25 | npm i --save-dev tailwindcss-css-filters 26 | 27 | # Using yarn 28 | yarn add -D tailwindcss-css-filters 29 | ``` 30 | 31 | Then add the plugin to your `tailwind.config.js` file: 32 | 33 | ```js 34 | module.exports = { 35 | theme: { 36 | extend: { 37 | hueRotate: { 38 | 8: '8deg', 39 | }, 40 | }, 41 | }, 42 | plugins: [ 43 | require('tailwindcss-css-filters'), 44 | ], 45 | } 46 | ``` 47 | 48 | ## Usage 49 | 50 | Now you can use the `filter` classes to add some filters to your HTML elements and images. 51 | 52 | ## Default Classes 53 | 54 | ```css 55 | .filter 56 | .filter-blur-2 57 | .filter-blur-4 58 | .filter-blur-8 59 | .filter-blur-16 60 | .filter-blur-32 61 | .filter-blur-64 62 | 63 | .hover\:filter-blur-2:hover 64 | .hover\:filter-blur-4:hover 65 | .hover\:filter-blur-8:hover 66 | .hover\:filter-blur-16:hover 67 | .hover\:filter-blur-32:hover 68 | .hover\:filter-blur-64:hover 69 | .focus\:filter-blur-2:focus 70 | .focus\:filter-blur-4:focus 71 | .focus\:filter-blur-8:focus 72 | .focus\:filter-blur-16:focus 73 | .focus\:filter-blur-32:focus 74 | .focus\:filter-blur-64:focus 75 | 76 | .filter-brightness-0 77 | .filter-brightness-25 78 | .filter-brightness-50 79 | .filter-brightness-75 80 | .filter-brightness-100 81 | .hover\:filter-brightness-0:hover 82 | .hover\:filter-brightness-25:hover 83 | .hover\:filter-brightness-50:hover 84 | .hover\:filter-brightness-75:hover 85 | .hover\:filter-brightness-100:hover 86 | .focus\:filter-brightness-0:focus 87 | .focus\:filter-brightness-25:focus 88 | .focus\:filter-brightness-50:focus 89 | .focus\:filter-brightness-75:focus 90 | .focus\:filter-brightness-100:focus 91 | 92 | .filter-contrast-0 93 | .filter-contrast-25 94 | .filter-contrast-50 95 | .filter-contrast-75 96 | .filter-contrast-100 97 | .hover\:filter-contrast-0:hover 98 | .hover\:filter-contrast-25:hover 99 | .hover\:filter-contrast-50:hover 100 | .hover\:filter-contrast-75:hover 101 | .hover\:filter-contrast-100:hover 102 | .focus\:filter-contrast-0:focus 103 | .focus\:filter-contrast-25:focus 104 | .focus\:filter-contrast-50:focus 105 | .focus\:filter-contrast-75:focus 106 | .focus\:filter-contrast-100:focus 107 | 108 | .filter-drop-shadow-sm 109 | .filter-drop-shadow 110 | .filter-drop-shadow-md 111 | .filter-drop-shadow-lg 112 | .filter-drop-shadow-xl 113 | .filter-drop-shadow-2xl 114 | .hover\:filter-drop-shadow-sm:hover 115 | .hover\:filter-drop-shadow:hover 116 | .hover\:filter-drop-shadow-md:hover 117 | .hover\:filter-drop-shadow-lg:hover 118 | .hover\:filter-drop-shadow-xl:hover 119 | .hover\:filter-drop-shadow-2xl:hover 120 | .focus\:filter-drop-shadow-sm:focus 121 | .focus\:filter-drop-shadow:focus 122 | .focus\:filter-drop-shadow-md:focus 123 | .focus\:filter-drop-shadow-lg:focus 124 | .focus\:filter-drop-shadow-xl:focus 125 | .focus\:filter-drop-shadow-2xl:focus 126 | 127 | .filter-grayscale-0 128 | .filter-grayscale-25 129 | .filter-grayscale-50 130 | .filter-grayscale-75 131 | .filter-grayscale-100 132 | .hover\:filter-grayscale-0:hover 133 | .hover\:filter-grayscale-25:hover 134 | .hover\:filter-grayscale-50:hover 135 | .hover\:filter-grayscale-75:hover 136 | .hover\:filter-grayscale-100:hover 137 | .focus\:filter-grayscale-0:focus 138 | .focus\:filter-grayscale-25:focus 139 | .focus\:filter-grayscale-50:focus 140 | .focus\:filter-grayscale-75:focus 141 | .focus\:filter-grayscale-100:focus 142 | 143 | .filter-hue-rotate-0 144 | .filter-hue-rotate-60 145 | .filter-hue-rotate-90 146 | .filter-hue-rotate-120 147 | .filter-hue-rotate-150 148 | .filter-hue-rotate-180 149 | .filter-hue-rotate-210 150 | .filter-hue-rotate-240 151 | .filter-hue-rotate-270 152 | .filter-hue-rotate-300 153 | .filter-hue-rotate-330 154 | .hover\:filter-hue-rotate-0:hover 155 | .hover\:filter-hue-rotate-60:hover 156 | .hover\:filter-hue-rotate-90:hover 157 | .hover\:filter-hue-rotate-120:hover 158 | .hover\:filter-hue-rotate-150:hover 159 | .hover\:filter-hue-rotate-180:hover 160 | .hover\:filter-hue-rotate-210:hover 161 | .hover\:filter-hue-rotate-240:hover 162 | .hover\:filter-hue-rotate-270:hover 163 | .hover\:filter-hue-rotate-300:hover 164 | .hover\:filter-hue-rotate-330:hover 165 | .focus\:filter-hue-rotate-0:focus 166 | .focus\:filter-hue-rotate-60:focus 167 | .focus\:filter-hue-rotate-90:focus 168 | .focus\:filter-hue-rotate-120:focus 169 | .focus\:filter-hue-rotate-150:focus 170 | .focus\:filter-hue-rotate-180:focus 171 | .focus\:filter-hue-rotate-210:focus 172 | .focus\:filter-hue-rotate-240:focus 173 | .focus\:filter-hue-rotate-270:focus 174 | .focus\:filter-hue-rotate-300:focus 175 | .focus\:filter-hue-rotate-330:focus 176 | 177 | .filter-invert-0 178 | .filter-invert-25 179 | .filter-invert-50 180 | .filter-invert-75 181 | .filter-invert-100 182 | .hover\:filter-invert-0:hover 183 | .hover\:filter-invert-25:hover 184 | .hover\:filter-invert-50:hover 185 | .hover\:filter-invert-75:hover 186 | .hover\:filter-invert-100:hover 187 | .focus\:filter-invert-0:focus 188 | .focus\:filter-invert-25:focus 189 | .focus\:filter-invert-50:focus 190 | .focus\:filter-invert-75:focus 191 | .focus\:filter-invert-100:focus 192 | 193 | .filter-saturate-0 194 | .filter-saturate-25 195 | .filter-saturate-50 196 | .filter-saturate-75 197 | .filter-saturate-100 198 | .filter-saturate-125 199 | .filter-saturate-150 200 | .filter-saturate-175 201 | .filter-saturate-200 202 | .hover\:filter-saturate-0:hover 203 | .hover\:filter-saturate-25:hover 204 | .hover\:filter-saturate-50:hover 205 | .hover\:filter-saturate-75:hover 206 | .hover\:filter-saturate-100:hover 207 | .hover\:filter-saturate-125:hover 208 | .hover\:filter-saturate-150:hover 209 | .hover\:filter-saturate-175:hover 210 | .hover\:filter-saturate-200:hover 211 | .focus\:filter-saturate-0:focus 212 | .focus\:filter-saturate-25:focus 213 | .focus\:filter-saturate-50:focus 214 | .focus\:filter-saturate-75:focus 215 | .focus\:filter-saturate-100:focus 216 | .focus\:filter-saturate-125:focus 217 | .focus\:filter-saturate-150:focus 218 | .focus\:filter-saturate-175:focus 219 | .focus\:filter-saturate-200:focus 220 | 221 | .filter-sepia-0 222 | .filter-sepia-25 223 | .filter-sepia-50 224 | .filter-sepia-75 225 | .filter-sepia-100 226 | .filter-sepia-125 227 | .filter-sepia-150 228 | .filter-sepia-175 229 | .filter-sepia-200 230 | .hover\:filter-sepia-0:hover 231 | .hover\:filter-sepia-25:hover 232 | .hover\:filter-sepia-50:hover 233 | .hover\:filter-sepia-75:hover 234 | .hover\:filter-sepia-100:hover 235 | .hover\:filter-sepia-125:hover 236 | .hover\:filter-sepia-150:hover 237 | .hover\:filter-sepia-175:hover 238 | .hover\:filter-sepia-200:hover 239 | .focus\:filter-sepia-0:focus 240 | .focus\:filter-sepia-25:focus 241 | .focus\:filter-sepia-50:focus 242 | .focus\:filter-sepia-75:focus 243 | .focus\:filter-sepia-100:focus 244 | .focus\:filter-sepia-125:focus 245 | .focus\:filter-sepia-150:focus 246 | .focus\:filter-sepia-175:focus 247 | .focus\:filter-sepia-200:focus 248 | ``` 249 | 250 | ### Example 251 | 252 | ```html 253 | 254 | 255 | 256 | ``` 257 | 258 | ## Customization 259 | 260 | ```js 261 | const filters = [ 262 | { 263 | name: 'blur', 264 | theme: { 265 | 2: '2px', 266 | 4: '4px', 267 | 8: '8px', 268 | 16: '16px', 269 | 32: '32px', 270 | 64: '64px', 271 | }, 272 | }, 273 | { 274 | name: 'brightness', 275 | theme: { 276 | 0: '0', 277 | '1/4': '0.25', 278 | '1/2': '0.5', 279 | '3/4': '0.75', 280 | 1: '1', 281 | }, 282 | }, 283 | { 284 | name: 'contrast', 285 | theme: { 286 | 0: '0', 287 | '1/4': '0.25', 288 | '1/2': '0.5', 289 | '3/4': '0.75', 290 | 1: '1', 291 | }, 292 | }, 293 | { 294 | name: 'dropShadow', 295 | theme: { 296 | sm: '0 1px 2px rgba(0, 0, 0, 0.05)', 297 | default: '0 1px 3px rgba(0, 0, 0, 0.1)', 298 | md: '0 4px 6px rgba(0, 0, 0, 0.1)', 299 | lg: '0 10px 15px rgba(0, 0, 0, 0.1)', 300 | xl: '0 20px 25px rgba(0, 0, 0, 0.1)', 301 | '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', 302 | }, 303 | }, 304 | { 305 | name: 'grayscale', 306 | theme: { 307 | 0: '0%', 308 | '1/4': '0.25', 309 | '1/2': '0.5', 310 | '3/4': '0.75', 311 | 1: '1', 312 | }, 313 | }, 314 | { 315 | name: 'hueRotate', 316 | theme: { 317 | 0: '0deg', 318 | 60: '60deg', 319 | 90: '90deg', 320 | 120: '120deg', 321 | 150: '150deg', 322 | 180: '180deg', 323 | 210: '210deg', 324 | 240: '240deg', 325 | 270: '270deg', 326 | 300: '300deg', 327 | 330: '330deg', 328 | }, 329 | }, 330 | ] 331 | ``` 332 | -------------------------------------------------------------------------------- /docs/README-pt.md: -------------------------------------------------------------------------------- 1 | ![Tailwind CSS Filters](/docs/logo.svg) 2 | 3 | # Tailwind CSS Filters 4 | 5 | Traduções 6 | 7 | - [Inglês](../README.md) 8 | 9 | Tailwind CSS Filters são filtos expressivos de CSS para o framework 'utility-first' [Tailwind CSS](https://tailwindcss.com). 10 | 11 | ```html 12 |
13 | Alguns filtros bacanas 14 |
15 | ``` 16 | 17 | [Visualizar demonstração](https://play.tailwindcss.com/KVnMFYYpLL) 18 | 19 | ## Instalação 20 | 21 | Instale o plugin usando npm: 22 | 23 | ```bash 24 | # Using npm 25 | npm i --save-dev tailwindcss-css-filters 26 | 27 | # Using yarn 28 | yarn add -D tailwindcss-css-filters 29 | ``` 30 | 31 | Depois adicione o plugin para o seu arquivo de configuração do Tailwind `tailwind.config.js`: 32 | 33 | ```js 34 | module.exports = { 35 | theme: { 36 | extend: { 37 | hueRotate: { 38 | 8: '8deg', 39 | }, 40 | }, 41 | }, 42 | plugins: [ 43 | require('tailwindcss-css-filters'), 44 | ], 45 | } 46 | ``` 47 | 48 | ## Uso 49 | 50 | Agora você pode usar as classes `filter` para adicionar filtros em seus elementos HTML e imagens. 51 | 52 | ## Classes Padrões 53 | 54 | ```css 55 | .filter 56 | .filter-blur-2 57 | .filter-blur-4 58 | .filter-blur-8 59 | .filter-blur-16 60 | .filter-blur-32 61 | .filter-blur-64 62 | 63 | .hover\:filter-blur-2:hover 64 | .hover\:filter-blur-4:hover 65 | .hover\:filter-blur-8:hover 66 | .hover\:filter-blur-16:hover 67 | .hover\:filter-blur-32:hover 68 | .hover\:filter-blur-64:hover 69 | .focus\:filter-blur-2:focus 70 | .focus\:filter-blur-4:focus 71 | .focus\:filter-blur-8:focus 72 | .focus\:filter-blur-16:focus 73 | .focus\:filter-blur-32:focus 74 | .focus\:filter-blur-64:focus 75 | 76 | .filter-brightness-0 77 | .filter-brightness-25 78 | .filter-brightness-50 79 | .filter-brightness-75 80 | .filter-brightness-100 81 | .hover\:filter-brightness-0:hover 82 | .hover\:filter-brightness-25:hover 83 | .hover\:filter-brightness-50:hover 84 | .hover\:filter-brightness-75:hover 85 | .hover\:filter-brightness-100:hover 86 | .focus\:filter-brightness-0:focus 87 | .focus\:filter-brightness-25:focus 88 | .focus\:filter-brightness-50:focus 89 | .focus\:filter-brightness-75:focus 90 | .focus\:filter-brightness-100:focus 91 | 92 | .filter-contrast-0 93 | .filter-contrast-25 94 | .filter-contrast-50 95 | .filter-contrast-75 96 | .filter-contrast-100 97 | .hover\:filter-contrast-0:hover 98 | .hover\:filter-contrast-25:hover 99 | .hover\:filter-contrast-50:hover 100 | .hover\:filter-contrast-75:hover 101 | .hover\:filter-contrast-100:hover 102 | .focus\:filter-contrast-0:focus 103 | .focus\:filter-contrast-25:focus 104 | .focus\:filter-contrast-50:focus 105 | .focus\:filter-contrast-75:focus 106 | .focus\:filter-contrast-100:focus 107 | 108 | .filter-drop-shadow-sm 109 | .filter-drop-shadow 110 | .filter-drop-shadow-md 111 | .filter-drop-shadow-lg 112 | .filter-drop-shadow-xl 113 | .filter-drop-shadow-2xl 114 | .hover\:filter-drop-shadow-sm:hover 115 | .hover\:filter-drop-shadow:hover 116 | .hover\:filter-drop-shadow-md:hover 117 | .hover\:filter-drop-shadow-lg:hover 118 | .hover\:filter-drop-shadow-xl:hover 119 | .hover\:filter-drop-shadow-2xl:hover 120 | .focus\:filter-drop-shadow-sm:focus 121 | .focus\:filter-drop-shadow:focus 122 | .focus\:filter-drop-shadow-md:focus 123 | .focus\:filter-drop-shadow-lg:focus 124 | .focus\:filter-drop-shadow-xl:focus 125 | .focus\:filter-drop-shadow-2xl:focus 126 | 127 | .filter-grayscale-0 128 | .filter-grayscale-25 129 | .filter-grayscale-50 130 | .filter-grayscale-75 131 | .filter-grayscale-100 132 | .hover\:filter-grayscale-0:hover 133 | .hover\:filter-grayscale-25:hover 134 | .hover\:filter-grayscale-50:hover 135 | .hover\:filter-grayscale-75:hover 136 | .hover\:filter-grayscale-100:hover 137 | .focus\:filter-grayscale-0:focus 138 | .focus\:filter-grayscale-25:focus 139 | .focus\:filter-grayscale-50:focus 140 | .focus\:filter-grayscale-75:focus 141 | .focus\:filter-grayscale-100:focus 142 | 143 | .filter-hue-rotate-0 144 | .filter-hue-rotate-60 145 | .filter-hue-rotate-90 146 | .filter-hue-rotate-120 147 | .filter-hue-rotate-150 148 | .filter-hue-rotate-180 149 | .filter-hue-rotate-210 150 | .filter-hue-rotate-240 151 | .filter-hue-rotate-270 152 | .filter-hue-rotate-300 153 | .filter-hue-rotate-330 154 | .hover\:filter-hue-rotate-0:hover 155 | .hover\:filter-hue-rotate-60:hover 156 | .hover\:filter-hue-rotate-90:hover 157 | .hover\:filter-hue-rotate-120:hover 158 | .hover\:filter-hue-rotate-150:hover 159 | .hover\:filter-hue-rotate-180:hover 160 | .hover\:filter-hue-rotate-210:hover 161 | .hover\:filter-hue-rotate-240:hover 162 | .hover\:filter-hue-rotate-270:hover 163 | .hover\:filter-hue-rotate-300:hover 164 | .hover\:filter-hue-rotate-330:hover 165 | .focus\:filter-hue-rotate-0:focus 166 | .focus\:filter-hue-rotate-60:focus 167 | .focus\:filter-hue-rotate-90:focus 168 | .focus\:filter-hue-rotate-120:focus 169 | .focus\:filter-hue-rotate-150:focus 170 | .focus\:filter-hue-rotate-180:focus 171 | .focus\:filter-hue-rotate-210:focus 172 | .focus\:filter-hue-rotate-240:focus 173 | .focus\:filter-hue-rotate-270:focus 174 | .focus\:filter-hue-rotate-300:focus 175 | .focus\:filter-hue-rotate-330:focus 176 | 177 | .filter-invert-0 178 | .filter-invert-25 179 | .filter-invert-50 180 | .filter-invert-75 181 | .filter-invert-100 182 | .hover\:filter-invert-0:hover 183 | .hover\:filter-invert-25:hover 184 | .hover\:filter-invert-50:hover 185 | .hover\:filter-invert-75:hover 186 | .hover\:filter-invert-100:hover 187 | .focus\:filter-invert-0:focus 188 | .focus\:filter-invert-25:focus 189 | .focus\:filter-invert-50:focus 190 | .focus\:filter-invert-75:focus 191 | .focus\:filter-invert-100:focus 192 | 193 | .filter-saturate-0 194 | .filter-saturate-25 195 | .filter-saturate-50 196 | .filter-saturate-75 197 | .filter-saturate-100 198 | .filter-saturate-125 199 | .filter-saturate-150 200 | .filter-saturate-175 201 | .filter-saturate-200 202 | .hover\:filter-saturate-0:hover 203 | .hover\:filter-saturate-25:hover 204 | .hover\:filter-saturate-50:hover 205 | .hover\:filter-saturate-75:hover 206 | .hover\:filter-saturate-100:hover 207 | .hover\:filter-saturate-125:hover 208 | .hover\:filter-saturate-150:hover 209 | .hover\:filter-saturate-175:hover 210 | .hover\:filter-saturate-200:hover 211 | .focus\:filter-saturate-0:focus 212 | .focus\:filter-saturate-25:focus 213 | .focus\:filter-saturate-50:focus 214 | .focus\:filter-saturate-75:focus 215 | .focus\:filter-saturate-100:focus 216 | .focus\:filter-saturate-125:focus 217 | .focus\:filter-saturate-150:focus 218 | .focus\:filter-saturate-175:focus 219 | .focus\:filter-saturate-200:focus 220 | 221 | .filter-sepia-0 222 | .filter-sepia-25 223 | .filter-sepia-50 224 | .filter-sepia-75 225 | .filter-sepia-100 226 | .filter-sepia-125 227 | .filter-sepia-150 228 | .filter-sepia-175 229 | .filter-sepia-200 230 | .hover\:filter-sepia-0:hover 231 | .hover\:filter-sepia-25:hover 232 | .hover\:filter-sepia-50:hover 233 | .hover\:filter-sepia-75:hover 234 | .hover\:filter-sepia-100:hover 235 | .hover\:filter-sepia-125:hover 236 | .hover\:filter-sepia-150:hover 237 | .hover\:filter-sepia-175:hover 238 | .hover\:filter-sepia-200:hover 239 | .focus\:filter-sepia-0:focus 240 | .focus\:filter-sepia-25:focus 241 | .focus\:filter-sepia-50:focus 242 | .focus\:filter-sepia-75:focus 243 | .focus\:filter-sepia-100:focus 244 | .focus\:filter-sepia-125:focus 245 | .focus\:filter-sepia-150:focus 246 | .focus\:filter-sepia-175:focus 247 | .focus\:filter-sepia-200:focus 248 | ``` 249 | 250 | ## Customização 251 | 252 | ```js 253 | const filters = [ 254 | { 255 | name: 'blur', 256 | theme: { 257 | 2: '2px', 258 | 4: '4px', 259 | 8: '8px', 260 | 16: '16px', 261 | 32: '32px', 262 | 64: '64px', 263 | }, 264 | }, 265 | { 266 | name: 'brightness', 267 | theme: { 268 | 0: '0', 269 | '1/4': '0.25', 270 | '1/2': '0.5', 271 | '3/4': '0.75', 272 | 1: '1', 273 | }, 274 | }, 275 | { 276 | name: 'contrast', 277 | theme: { 278 | 0: '0', 279 | '1/4': '0.25', 280 | '1/2': '0.5', 281 | '3/4': '0.75', 282 | 1: '1', 283 | }, 284 | }, 285 | { 286 | name: 'dropShadow', 287 | theme: { 288 | sm: '0 1px 2px rgba(0, 0, 0, 0.05)', 289 | default: '0 1px 3px rgba(0, 0, 0, 0.1)', 290 | md: '0 4px 6px rgba(0, 0, 0, 0.1)', 291 | lg: '0 10px 15px rgba(0, 0, 0, 0.1)', 292 | xl: '0 20px 25px rgba(0, 0, 0, 0.1)', 293 | '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', 294 | }, 295 | }, 296 | { 297 | name: 'grayscale', 298 | theme: { 299 | 0: '0%', 300 | '1/4': '0.25', 301 | '1/2': '0.5', 302 | '3/4': '0.75', 303 | 1: '1', 304 | }, 305 | }, 306 | { 307 | name: 'hueRotate', 308 | theme: { 309 | 0: '0deg', 310 | 60: '60deg', 311 | 90: '90deg', 312 | 120: '120deg', 313 | 150: '150deg', 314 | 180: '180deg', 315 | 210: '210deg', 316 | 240: '240deg', 317 | 270: '270deg', 318 | 300: '300deg', 319 | 330: '330deg', 320 | }, 321 | }, 322 | ] 323 | ``` 324 | -------------------------------------------------------------------------------- /docs/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-css-filters", 3 | "version": "2.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "version": "2.0.0", 9 | "license": "MIT", 10 | "devDependencies": { 11 | "lodash": "^4.17.20", 12 | "prettier": "^2.1.2" 13 | } 14 | }, 15 | "node_modules/lodash": { 16 | "version": "4.17.21", 17 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", 18 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", 19 | "dev": true 20 | }, 21 | "node_modules/prettier": { 22 | "version": "2.2.1", 23 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", 24 | "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", 25 | "dev": true, 26 | "bin": { 27 | "prettier": "bin-prettier.js" 28 | }, 29 | "engines": { 30 | "node": ">=10.13.0" 31 | } 32 | } 33 | }, 34 | "dependencies": { 35 | "lodash": { 36 | "version": "4.17.21", 37 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", 38 | "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", 39 | "dev": true 40 | }, 41 | "prettier": { 42 | "version": "2.2.1", 43 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz", 44 | "integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==", 45 | "dev": true 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-css-filters", 3 | "version": "2.1.0", 4 | "description": "This is a Tailwind CSS package which allows you to use CSS filters.", 5 | "main": "src/index.js", 6 | "keywords": [ 7 | "Tailwind CSS", 8 | "Tailwind", 9 | "TailwindCSS", 10 | "CSS Filters", 11 | "Filters" 12 | ], 13 | "author": "larsklopstra@gmail.com", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "lodash": "^4.17.20", 17 | "prettier": "^2.1.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/availableFilters.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: 'blur', 4 | theme: { 5 | 2: '2px', 6 | 4: '4px', 7 | 8: '8px', 8 | 16: '16px', 9 | 32: '32px', 10 | 64: '64px', 11 | }, 12 | }, 13 | { 14 | name: 'brightness', 15 | theme: { 16 | 0: '0%', 17 | 25: '25%', 18 | 50: '50%', 19 | 75: '75%', 20 | 100: '100%', 21 | }, 22 | }, 23 | { 24 | name: 'contrast', 25 | theme: { 26 | 0: '0%', 27 | 25: '25%', 28 | 50: '50%', 29 | 75: '75%', 30 | 100: '100%', 31 | }, 32 | }, 33 | { 34 | name: 'dropShadow', 35 | theme: { 36 | sm: '0 1px 2px rgba(0, 0, 0, 0.05)', 37 | default: '0 1px 3px rgba(0, 0, 0, 0.1)', 38 | md: '0 4px 6px rgba(0, 0, 0, 0.1)', 39 | lg: '0 10px 15px rgba(0, 0, 0, 0.1)', 40 | xl: '0 20px 25px rgba(0, 0, 0, 0.1)', 41 | '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', 42 | }, 43 | }, 44 | { 45 | name: 'grayscale', 46 | theme: { 47 | 0: '0%', 48 | 25: '25%', 49 | 50: '50%', 50 | 75: '75%', 51 | 100: '100%', 52 | }, 53 | }, 54 | { 55 | name: 'hueRotate', 56 | theme: { 57 | 0: '0deg', 58 | 60: '60deg', 59 | 90: '90deg', 60 | 120: '120deg', 61 | 150: '150deg', 62 | 180: '180deg', 63 | 210: '210deg', 64 | 240: '240deg', 65 | 270: '270deg', 66 | 300: '300deg', 67 | 330: '330deg', 68 | }, 69 | }, 70 | { 71 | name: 'invert', 72 | theme: { 73 | 0: '0%', 74 | 25: '25%', 75 | 50: '50%', 76 | 75: '75%', 77 | 100: '100%', 78 | }, 79 | }, 80 | { 81 | name: 'saturate', 82 | theme: { 83 | 0: '0%', 84 | 25: '25%', 85 | 50: '50%', 86 | 75: '75%', 87 | 100: '100%', 88 | 125: '125%', 89 | 150: '150%', 90 | 175: '175%', 91 | 200: '200%', 92 | }, 93 | }, 94 | { 95 | name: 'sepia', 96 | theme: { 97 | 0: '0%', 98 | 25: '25%', 99 | 50: '50%', 100 | 75: '75%', 101 | 100: '100%', 102 | 125: '125%', 103 | 150: '150%', 104 | 175: '175%', 105 | 200: '200%', 106 | }, 107 | }, 108 | ] 109 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const backdropFilters = require('./plugins/backdropFilters') 2 | const filters = require('./plugins/filters') 3 | 4 | module.exports = ({ addUtilities, theme, e }) => { 5 | backdropFilters({ addUtilities, theme, e }) 6 | filters({ addUtilities, theme, e }) 7 | } 8 | -------------------------------------------------------------------------------- /src/plugins/backdropFilters.js: -------------------------------------------------------------------------------- 1 | const availableFilters = require('../availableFilters') 2 | const generateBase = require('../utils/generateBase') 3 | const generateFilters = require('../utils/generateFilters') 4 | 5 | module.exports = function ({ addUtilities, theme, e }) { 6 | generateBase({ 7 | cssProperty: 'backdrop-filter', 8 | name: 'bdf', 9 | addUtilities, 10 | }) 11 | 12 | generateFilters({ 13 | prefix: 'bdf', 14 | filters: availableFilters, 15 | addUtilities, 16 | theme, 17 | e, 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /src/plugins/filters.js: -------------------------------------------------------------------------------- 1 | const availableFilters = require('../availableFilters') 2 | const generateBase = require('../utils/generateBase') 3 | const generateFilters = require('../utils/generateFilters') 4 | 5 | module.exports = function ({ addUtilities, theme, e }) { 6 | generateBase({ 7 | cssProperty: 'filter', 8 | name: 'filter', 9 | addUtilities, 10 | }) 11 | 12 | generateFilters({ 13 | prefix: 'filter', 14 | filters: availableFilters, 15 | addUtilities, 16 | theme, 17 | e, 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /src/utils/generateBase.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ name, cssProperty, addUtilities }) => { 2 | addUtilities({ 3 | [`.${name}`]: { 4 | [`--${name}-blur`]: '0', 5 | [`--${name}-brightness`]: '1', 6 | [`--${name}-contrast`]: '1', 7 | [`--${name}-drop-shadow`]: '0 0 0', 8 | [`--${name}-grayscale`]: '0', 9 | [`--${name}-hue-rotate`]: '0', 10 | [`--${name}-invert`]: '0', 11 | [`--${name}-saturate`]: '1', 12 | [`--${name}-sepia`]: '0', 13 | [cssProperty]: [ 14 | `blur(var(--${name}-blur))`, 15 | `brightness(var(--${name}-brightness))`, 16 | `contrast(var(--${name}-contrast))`, 17 | `drop-shadow(var(--${name}-drop-shadow))`, 18 | `grayscale(var(--${name}-grayscale))`, 19 | `hue-rotate(var(--${name}-hue-rotate))`, 20 | `invert(var(--${name}-invert))`, 21 | `saturate(var(--${name}-saturate))`, 22 | `sepia(var(--${name}-sepia))`, 23 | ].join(' '), 24 | }, 25 | }) 26 | } 27 | -------------------------------------------------------------------------------- /src/utils/generateFilters.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash') 2 | 3 | module.exports = ({ addUtilities, theme, prefix, filters, e }) => { 4 | for (const filter of filters) { 5 | const filterTheme = _.merge(filter.theme, theme(filter.name)) 6 | 7 | const generatedFilter = _.map(filterTheme, (value, key) => ({ 8 | [key === 'default' 9 | ? `.${prefix}-${_.kebabCase(filter.name)}` 10 | : `.${prefix}-${_.kebabCase(filter.name)}-${e(key)}`]: { 11 | [`--${prefix}-${_.kebabCase(filter.name)}`]: value, 12 | }, 13 | })) 14 | 15 | addUtilities(generatedFilter, { 16 | variants: ['dark', 'responsive', 'hover', 'focus'], 17 | }) 18 | } 19 | } 20 | --------------------------------------------------------------------------------