tailwindcss-glow weekly downloads statistics

Colored/Dynamic Shadow/Glow Plugin for TailwindCSS

_NOTE_: This plugin is for Tailwind 2.x and unstable; 1.x plugin is at v0.3.10. https://github.com/umstek/tailwindcss-glow/releases/tag/v0.3.10

The default shadow plugin for TailwindCSS doesn't support colored shadows, which is a trend now. This can be customized, of course, but it is still overwhelming to get colored shadows for, e.g.: 10 colors. WARNING: **This generates a lot of styles, so it is recommended that you choose only the colors that are necessary, and/or enable purging.**

Installation

CAREFUL: 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.

With npm

With yarn

Usage

This plugin generates the following utilities:

Customization

Since the theme colors might include a lot of unnecessary colors, it is recommended to limit the color palette to your selected accent color(s). Since the configuration file is JavaScript, you can filter out some of the theme colors.

The default glow styles are the same as TailwindCSS's default shadows, but with an increase in alpha channel. You can customize them just like you can customize TailwindCSS shadows with one key difference: In this plugin, we have to support multiple colors, so the R, G, B part of the color is changing. So, instead of an style string, in this plugin you have to use a function in the format (e.g.):

where 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. e.g.: For baseColor == rgb(235, 248, 255),

will 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._

Dynamic 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.

Description from the npm listing.