Tailwind Gradients
Generate CSS Background Gradients and SVG Fill&Stroke Gradients
After reading a post about svg-gradient-fill i wrote this plugin, its not usually a tailwind concern to write extra files. This might be more suited for webpack plugin or loader, but since i am already using tailwind to generate gradients...
Usage
// tailwind.config.js
const { tailwindGradients } = require('@therobot/tw-gradients')
const { writeFileSync } = require('fs')
const vueTemplate = svg =>
[
`<template functional>\n${svg}\n</template>`,
`<style lang="postcss">`,
` .v-icon { stroke: none; fill: none; }`,
` .v-icon svg { stroke: inherit; fill: inherit; }`,
`</style>`,
`<script lang="ts">`,
`import Vue from 'vue'`,
`export default Vue.extend<{}>({ functional: true, name: 'CssGradients' })`,
`</script>`,
].join('\n')
const config = {
plugins: [
tailwindGradients({
/*
* Adds base style .fill-inherit svg { fill: inherit }
*/
addSvgInherit: true,
/*
* svgUrlPrefix: '~/gradients.svg'
*
* Makes resulting style looks like this:
* fill: url(~/gradients.svg#gradient-name)
*
* Its not supported by most browsers
*
* Just in case you got some webpack plugins for this
*/
classPrefix: 'bg-gradient',
onResult: (svg, linearGradients) => {
writeFileSync('./public/gradients.svg', svg)
/**
* * linearGradients is array of strings
* writeFileSync('./public/innerSvg.svg', linearGradients.join(''))
*
* might be useful with raw-loader
* import svgInner from 'raw-loader!./innerSvg.svg'
* <svg style="display:none" v-html="svgInner"></svg>
*
*/
writeFileSync('./src/components/atoms/SvgGradients.vue', vueTemplate(svg))
},
}),
],
theme: {
gradients: theme => ({
// .bg-gradient-red .stroke-red .fill-red
red: {
fallback: 'currentColor',
colors: [theme('colors.red.700'), theme('colors.orange.600')],
},
// .bg-gradient-var
var: {
// you need to define --my-color in hidden svg
// #fill-var { --my-color: red }
colors: ['var(--my-color)', theme('colors.yellow.700')],
angles: 135,
},
// .bg-gradient-gray
gray: {
fallback: 'last',
angles: [90]
colors: [theme('colors.gray.700'), theme('colors.gray.800')],
},
// .bg-gradient-teal-180 .bg-gradient-teal-90
teal: {
fallback: 'first',
colors: [
theme('colors.teal.700'),
'ease-in-out', // it will not be used in svg, but `postcss-easing-gradients` will see it in css
theme('colors.blue.500'),
],
angles: [180, 90],
},
}),
},
}// vue.config.js
module.exports = {
configureWebpack: {
devServer: {
watchOptions: {
ignored: [/node_modules/, /public/, /SvgGradients/],
},
},
},
}