Skip to content

Instantly share code, notes, and snippets.

@n1k1c4
Created January 14, 2022 06:34
Show Gist options
  • Save n1k1c4/95a453db1d8b432c18269fa4379b6401 to your computer and use it in GitHub Desktop.
Save n1k1c4/95a453db1d8b432c18269fa4379b6401 to your computer and use it in GitHub Desktop.
plugin(({ addUtilities, variants, theme, e }) => {
const colors = theme("colors")
const generateColors = (e, colors, prefix) =>
Object.keys(colors).reduce((acc, key) => {
if (typeof colors[key] === "string") {
return {
...acc,
[`${prefix}-${e(key)}`]: {
"-webkit-text-fill-color": colors[key],
},
}
}
const innerColors = generateColors(
e,
colors[key],
`${prefix}-${e(key)}`
)
return {
...acc,
...innerColors,
}
}, {})
const utils = generateColors(e, colors, ".text-fill")
addUtilities(utils, variants("textFill"))
}),
plugin(({ addUtilities, variants, theme, e }) => {
const colors = theme("colors")
const generateColors = (e, colors, prefix) =>
Object.keys(colors).reduce((acc, key) => {
if (typeof colors[key] === "string") {
return {
...acc,
[`${prefix}-${e(key)}`]: {
"--tw-shadow": `0 0 0 9999px ${colors[key]} inset`,
boxShadow:
"var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
},
}
}
const innerColors = generateColors(
e,
colors[key],
`${prefix}-${e(key)}`
)
return {
...acc,
...innerColors,
}
}, {})
const utils = generateColors(e, colors, ".shadow-fill")
addUtilities(utils, variants("shadowFill"))
}),
// eslint rules
// "tailwindcss/no-custom-classname": [
// "warn",
// {
// "whitelist": ["text-fill-.+", "shadow-fill-.+"]
// }
// ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment