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: about 1 year 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 (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-22T09:48:21.000Z (about 6 years ago)
- Last Synced: 2024-10-30T14:41:10.473Z (over 1 year 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
[](https://github.com/octoper/tailwindcss-shadow-outline-colors/blob/master/LICENSE)
[](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')() ]
],
}
```