{"id":20789131,"url":"https://github.com/umstek/tailwindcss-glow","last_synced_at":"2025-05-05T18:45:56.086Z","repository":{"id":36635086,"uuid":"228211320","full_name":"umstek/tailwindcss-glow","owner":"umstek","description":"A glow/dynamic shadow plugin for TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-03-11T13:11:43.000Z","size":796,"stargazers_count":14,"open_issues_count":28,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-27T08:23:05.672Z","etag":null,"topics":["colored-shadows","glow","shadow","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umstek.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-15T16:01:12.000Z","updated_at":"2024-05-15T20:51:28.000Z","dependencies_parsed_at":"2024-11-17T15:20:44.914Z","dependency_job_id":"fac15fe0-23e8-407a-9e2b-7ff7e136e248","html_url":"https://github.com/umstek/tailwindcss-glow","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.3125,"last_synced_commit":"a1c9b368ac6eda621a4086bcb0de799dba62f015"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umstek%2Ftailwindcss-glow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umstek%2Ftailwindcss-glow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umstek%2Ftailwindcss-glow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umstek%2Ftailwindcss-glow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umstek","download_url":"https://codeload.github.com/umstek/tailwindcss-glow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252555730,"owners_count":21767220,"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":["colored-shadows","glow","shadow","tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-17T15:19:49.933Z","updated_at":"2025-05-05T18:45:56.066Z","avatar_url":"https://github.com/umstek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Colored/Dynamic Shadow/Glow Plugin for TailwindCSS\r\n\r\n_NOTE_: This plugin is for Tailwind 2.x and unstable; 1.x plugin is at v0.3.10.\r\nhttps://github.com/umstek/tailwindcss-glow/releases/tag/v0.3.10\r\n\r\nThe default shadow plugin for TailwindCSS doesn't support colored shadows, which is a trend now.\r\nThis can be customized, of course, but it is still overwhelming to get colored shadows for, e.g.: 10 colors.  \r\nWARNING: **This generates a lot of styles, so it is recommended that you choose only the colors that are necessary,\r\nand/or enable purging.**\r\n\r\n## Installation\r\n\r\nCAREFUL: We DON'T use semantic versioning. 0.x versions are for tailwindcss 1.x and the new versions will maintain major version number as same as the tailwind major version.\r\n\r\n### With `npm`\r\n\r\n```bash\r\nnpm i tailwindcss-glow\r\n```\r\n\r\n### With `yarn`\r\n\r\n```bash\r\nyarn add tailwindcss-glow\r\n```\r\n\r\n## Usage\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  theme: {\r\n    glow: {\r\n      colors: { // Defaults to all theme colors\r\n        // ...\r\n      },\r\n      styles: { // Defaults to these values\r\n        default: baseColor =\u003e\r\n          `0 1px 3px 0 rgba(${baseColor}, 0.4), 0 1px 2px 0 rgba(${baseColor}, 0.24)`,\r\n        md: baseColor =\u003e\r\n          `0 4px 6px -1px rgba(${baseColor}, 0.4), 0 2px 4px -1px rgba(${baseColor}, 0.24)`,\r\n        lg: baseColor =\u003e\r\n          `0 10px 15px -3px rgba(${baseColor}, 0.4), 0 4px 6px -2px rgba(${baseColor}, 0.20)`,\r\n        xl: baseColor =\u003e\r\n          `0 20px 25px -5px rgba(${baseColor}, 0.4), 0 10px 10px -5px rgba(${baseColor}, 0.16)`,\r\n        \"2xl\": baseColor =\u003e `0 25px 50px -12px rgba(${baseColor}, 1)`,\r\n        outline: baseColor =\u003e `0 0 0 3px rgba(${baseColor}, 0.5)`,\r\n        none: \"none\"\r\n      }\r\n    }\r\n    // ...\r\n  },\r\n  plugins: [\r\n    // ...\r\n    require(\"tailwindcss-glow\")(),\r\n    // ...\r\n};\r\n```\r\n\r\nThis plugin generates the following utilities:\r\n\r\n```css\r\n.glow-blue-100 {\r\n  /* For each color (blue-100 here), for the `default` style */\r\n  box-shadow: 0 1px 3px 0 rgba(235, 248, 255, 0.4), 0 1px 2px 0 rgba(235, 248, 255, 0.24);\r\n}\r\n\r\n.glow-blue-100-md {\r\n  /* For each color (blue-100 here), for each sizes (styles) from `md`, `lg`, `xl` and `2xl`. */\r\n  box-shadow: 0 4px 6px -1px rgba(235, 248, 255, 0.4), 0 2px 4px -1px rgba(235, 248, 255, 0.24);\r\n}\r\n\r\n/* ... */\r\n\r\n.glow-dynamic {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.glow-dynamic::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  background: inherit;\r\n  z-index: -1;\r\n  width: 99%;\r\n  height: 98%;\r\n  top: 2px;\r\n  left: 0.4%;\r\n  filter: blur(2px);\r\n  opacity: 1;\r\n}\r\n\r\n.glow-dynamic-md {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.glow-dynamic-md::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  background: inherit;\r\n  z-index: -1;\r\n  width: 99%;\r\n  height: 98%;\r\n  top: 4px;\r\n  left: 0.5%;\r\n  filter: blur(3px);\r\n  opacity: 0.7;\r\n}\r\n\r\n/* ...*/\r\n\r\n/* \r\n * Dynamic glow styles cannot be extended, as of now. The built-in styles are, `default`, `md`, `lg`, `xl` and `2xl`. \r\n * These have been designed to be visually similar as much as possible to their box-shadow counterparts, \r\n * when used with a single color background.\r\n */\r\n```\r\n\r\n## Customization\r\n\r\nSince the theme colors might include a lot of unnecessary colors, it is recommended to limit the color palette to\r\nyour selected accent color(s).\r\nSince the configuration file is JavaScript, you can filter out some of the theme colors.\r\n\r\n```js\r\nglow: (theme) =\u003e ({\r\n  colors: {\r\n    blue: theme(\"colors.blue\"),\r\n    pink: theme(\"colors.pink.100\"),\r\n  },\r\n  styles: {\r\n    // ...\r\n  },\r\n});\r\n```\r\n\r\nThe default glow styles are the same as TailwindCSS's default shadows, but with an increase in alpha channel.\r\nYou can customize them just like you can customize TailwindCSS shadows with one key difference:  \r\nIn this plugin, we have to support multiple colors, so the R, G, B part of the color is changing.\r\nSo, instead of an style string, in this plugin you have to use a function in the format (e.g.):\r\n\r\n```js\r\n md: baseColor =\u003e `0 4px 6px -1px rgba(${baseColor}, 0.4), 0 2px 4px -1px rgba(${baseColor}, 0.24)`,\r\n // ...\r\n```\r\n\r\nwhere the `baseColor` will be a comma-separated list of R, G and B values of that color, in that order, as a string. We have used string interpolation here.  \r\ne.g.: For `baseColor` == `rgb(235, 248, 255)`,\r\n\r\n```css\r\n0 4px 6px -1px rgba(235, 248, 255, 0.4), 0 2px 4px -1px rgba(235, 248, 255, 0.24);\r\n```\r\n\r\nwill be generated. Your theme colors can be in any format, `#000000` or `hsl` or otherwise; these will be converted. _This implementation is subject to change in a future version._\r\n\r\nDynamic glows cannot be customized currently, as they are _hand-picked_ to be visually similar to the default styles, and thus do not show a sane way to customize.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumstek%2Ftailwindcss-glow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumstek%2Ftailwindcss-glow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumstek%2Ftailwindcss-glow/lists"}