Skip to content
This repository has been archived by the owner on Jul 14, 2021. It is now read-only.

A TailwindCSS plugin for creating shadow outline with multiple colors

License

Notifications You must be signed in to change notification settings

octoper/tailwindcss-shadow-outline-colors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Shadow Outline Colors

license npm

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')() ]
  ],
}

About

A TailwindCSS plugin for creating shadow outline with multiple colors

Resources

License

Stars

Watchers

Forks

Packages

No packages published