octoper / tailwindcss-shadow-outline-colors

A TailwindCSS plugin for creating shadow outline with multiple colors

Tailwind CSS Shadow Outline Colors

Installation

npm install tailwindcss-shadow-outline-colors

or using if you are using yarn

yarn add tailwindcss-shadow-outline-colors

Add the plugin to the plugins array in your Tailwind CSS configuration.

plugins: [
    require('tailwindcss-shadow-outline-colors')()
]

Colors

By default we use the colors variable from you TailwindCSS config. But if you want to use different colors you can add shadowOutlineColors variable in your config

// tailwind.config.js
module.exports = {
  theme: {
    shadowOutlineColors: {
        'primary': {
            500: '#EA4C89',
            600: '#D3447B',
            700: '#BE3D6F',
        },
    }
  },
  variants: {},
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}

Variants

You can add hover, focus or any othe variant just place shadowOutline in your variants

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {
    'shadowOutline': ['focus']
  },
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}

Shadow and Opacity

You can also change the your shadow style and the opacity of the color

// tailwind.config.js
module.exports = {
  theme: {
    shadowOutline: {
        'shadow': '0 0 0 0.2em',
        'alpha': '0.5'
    }
  },
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}