{"id":13480173,"url":"https://github.com/brettgullan/tailwindcss-scrims","last_synced_at":"2025-06-29T17:36:03.899Z","repository":{"id":57376399,"uuid":"150039852","full_name":"brettgullan/tailwindcss-scrims","owner":"brettgullan","description":"Configurable Tailwind plugin for generating scrim classes.","archived":false,"fork":false,"pushed_at":"2019-05-05T03:24:22.000Z","size":17,"stargazers_count":46,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-25T22:49:01.358Z","etag":null,"topics":["scrims","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":null,"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/brettgullan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-24T01:05:16.000Z","updated_at":"2025-04-13T14:14:24.000Z","dependencies_parsed_at":"2022-09-06T06:52:05.306Z","dependency_job_id":null,"html_url":"https://github.com/brettgullan/tailwindcss-scrims","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brettgullan/tailwindcss-scrims","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brettgullan%2Ftailwindcss-scrims","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brettgullan%2Ftailwindcss-scrims/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brettgullan%2Ftailwindcss-scrims/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brettgullan%2Ftailwindcss-scrims/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brettgullan","download_url":"https://codeload.github.com/brettgullan/tailwindcss-scrims/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brettgullan%2Ftailwindcss-scrims/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262202496,"owners_count":23274379,"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":["scrims","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:35.384Z","updated_at":"2025-06-29T17:36:03.872Z","avatar_url":"https://github.com/brettgullan.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":[],"readme":"# Tailwind CSS Scrims\n\u003e Configurable Tailwind plugin for generating scrim utility classes.\n\n## What are Scrims?\n\nIn photography, a scrim is something that softens light — from the sun, or a flash — and is typically a piece of fabric, paper or acrylic stretched across a frame.\n\nIn UX, a scrim is a design technique (a gradient or overlay) used to make text more legible when overlaid on an image. The kind of visual treatment that is becoming increasingly common in card-based design.\n\nA typical scrim is a neutral gradient that starts about half-way down an image and increases to 30%-40% opacity, creating a subtle darkening effect that provides enought contrast for white text to be legible. \n\n## Install\n\n`tailwindcss-scrims` automatically generates generates scrim class variations for specified directions, distances and gradient densities.\n\n\n```\nnpm install --save-dev tailwindcss-scrims\n```\n\n## Usage\n\n```js\n// tailwind.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require('tailwindcss-scrims')({\n      directions: {\n        't': 'to bottom',\n        'b': 'to top',\n        'r': 'to left',\n        'l': 'to right',\n      },\n      distances: {\n        '1/4': '25%',\n        '1/3': '33.33333%',\n        '1/2': '50%',\n        '2/3': '66.66666%',\n        '3/4': '75%',\n      },\n      colors: {\n        default: [rgba(0,0,0,0.4), rgba(0,0,0,0)],\n      },\n      variants: ['responsive', 'hover'],\n    })\n  ]\n  // ...\n}\n```\n\n## Options\n\n### `directions` (optional)\n\n**Default:**\n```js\n{\n  't': 'to bottom',\n  'b': 'to top',\n  'r': 'to left',\n  'l': 'to right',\n}\n```\n\nThis is where you can define the direction — or location of emphasis — for a scrim. i.e. where the scrim color is darkest.\nEach `direction` is specified as a key/value pair. The key is used in the utility class name, the value is a valid CSS Gradient direction.\n\n\n### `distances` (optional)\n\n**Default:**\n```js\n{\n  '1/4': '25%',\n  '1/3': '33.33333%',\n  '1/2': '50%',\n  '2/3': '66.66666%',\n  '3/4': '75%',\n}\n```\n\nThis defines the distance the scrim covers. i.e. how much of the image is covered by the scrim gradient. Each `distance` is specified as a key/value pair. The key is used in the utility class name, the value is a valid CSS Gradient 'stop' location.\n\n\n### `colors` (optional)\n\n**Default:**\n```js\n{\n  default: [rgba(0,0,0,0.4), rgba(0,0,0,0)],\n}\n```\n\n`colors` define the `{start}` and `{end}` colors (including alpha) for a scrim.\n\n### `variants` (optional)\n\n**Default:**\n```js\n['responsive', 'hover']\n```\n\nAs per the [tailwind plugin docs](https://tailwindcss.com/docs/plugins/) you can also pass variants (responsive, hover, etc.) as an option.\n\n```js\nrequire('tailwindcss-scrims')({\n  variants: ['responsive', 'hover'],\n})\n```\n\n## Example\n\nThis configuration:\n\n```js\n// tailwind.js\nmodule.exports = {\n  // ...\n  plugins: [\n    require('tailwindcss-scrims')({\n      directions: {\n        't': 'to bottom',\n        'b': 'to top',\n      },\n      distances: {\n        default: '25%',\n        '1/2': '50%',\n      },\n      colors: {\n        default: [rgba(0,0,0,0.4), rgba(0,0,0,0)],\n      },\n      variants: [],\n    })\n  ]\n  // ...\n}\n```\n\nResults in the following utilities:\n\n```css\n.scrim-t::after: {\n  content: \" \",\n  position: absolute,\n  top: 0,\n  left: 0,\n  width: 100%,\n  height: 100%,\n  backgroundImage: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 25%);\n}\n\n.scrim-t-1\\/2::after: {\n  content: \" \",\n  position: absolute,\n  top: 0,\n  left: 0,\n  width: 100%,\n  height: 100%,\n  backgroundImage: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 50%);\n}\n\n.scrim-b::after: {\n  content: \" \",\n  position: absolute,\n  top: 0,\n  left: 0,\n  width: 100%,\n  height: 100%,\n  backgroundImage: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 25%);\n}\n\n.scrim-b-1\\/2::after: {\n  content: \" \",\n  position: absolute,\n  top: 0,\n  left: 0,\n  width: 100%,\n  height: 100%,\n  backgroundImage: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 50%);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrettgullan%2Ftailwindcss-scrims","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrettgullan%2Ftailwindcss-scrims","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrettgullan%2Ftailwindcss-scrims/lists"}