https://github.com/octoper/tailwindcss-shadow-outline-colors

A TailwindCSS plugin for creating shadow outline with multiple colors
https://github.com/octoper/tailwindcss-shadow-outline-colors

Last synced: 13 days ago
JSON representation

A TailwindCSS plugin for creating shadow outline with multiple colors

• Host: GitHub
• URL: https://github.com/octoper/tailwindcss-shadow-outline-colors
• Owner: octoper
• License: mit
• Archived: true
• Created: 2020-03-25T13:31:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-22T09:48:21.000Z (over 4 years ago)
• Last Synced: 2024-08-01T17:21:44.722Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 498 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tailwind CSS Shadow Outline Colors

[![license](https://badgen.net/github/license/octoper/tailwindcss-shadow-outline-colors)](https://github.com/octoper/tailwindcss-shadow-outline-colors/blob/master/LICENSE)

[![npm](https://badgen.net/npm/v/tailwindcss-shadow-outline-colors)](https://www.npmjs.com/package/tailwindcss-shadow-outline-colors)

## Installation

```bash

npm install tailwindcss-shadow-outline-colors

```

or using if you are using `yarn`

```bash

yarn add tailwindcss-shadow-outline-colors

```

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

```js

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

```js

// 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

```js

// 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 

```js

// tailwind.config.js

module.exports = {

  theme: {

    shadowOutline: {

        'shadow': '0 0 0 0.2em',

        'alpha': '0.5'

    }

  },

  plugins: [

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

  ],

}

```