https://github.com/sambeevors/tailwindcss-neumorphism
Generate soft UI CSS code using tailwindcss
https://github.com/sambeevors/tailwindcss-neumorphism
Last synced: about 2 months ago
JSON representation
Generate soft UI CSS code using tailwindcss
- Host: GitHub
- URL: https://github.com/sambeevors/tailwindcss-neumorphism
- Owner: sambeevors
- Created: 2020-06-04T20:11:25.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-13T20:55:19.000Z (over 1 year ago)
- Last Synced: 2024-12-06T21:06:24.982Z (6 months ago)
- Language: JavaScript
- Homepage: https://tailwindcss-neumorphism-demo.netlify.app/
- Size: 25.4 KB
- Stars: 151
- Watchers: 4
- Forks: 22
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# tailwindcss-neumorphism
[](http://makeapullrequest.com)
> Generate soft UI CSS code using tailwindcss
[Demo](https://tailwindcss-neumorphism-demo.netlify.app/)
## Why?
This plugin is inspired by [neumorphism.io](https://neumorphism.io/), as well as [this article](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) by Michal Malewicz which I highly recommend you check out.
## Getting Started
Install via npm or yarn
```
npm install tw-neumorphism
```
```
yarn add tw-neumorphism
```
Then just require it as a plugin.
```js
// tailwind.config.js
module.exports = {
plugins: [require('tw-neumorphism')],
}
```
The plugin will generate 4 different utilities per color, in any number of sizes (default 5).
```css
.nm-flat-red-500 {
background: #f56565;
box-shadow: 0.2em 0.2em calc(0.2em * 2) #f01414, calc(0.2em * -1) calc(
0.2em * -1
)
calc(0.2em * 2) #f9a6a6;
}
.nm-concave-red-500 {
background: linear-gradient(145deg, #f23434, #f78585);
box-shadow: 0.2em 0.2em calc(0.2em * 2) #f01414, calc(0.2em * -1) calc(
0.2em * -1
)
calc(0.2em * 2) #f9a6a6;
}
.nm-convex-red-500 {
background: linear-gradient(145deg, #f78585, #f23434);
box-shadow: 0.2em 0.2em calc(0.2em * 2) #f01414, calc(0.2em * -1) calc(
0.2em * -1
)
calc(0.2em * 2) #f9a6a6;
}
.nm-inset-red-500 {
background: linear-gradient(145deg, #f78585, #f23434);
box-shadow: inset 0.2em 0.2em calc(0.2em * 2) #f01414, inset calc(0.2em * -1) calc(
0.2em * -1
)
calc(0.2em * 2) #f9a6a6;
}
.nm-flat-red-500-lg {
background: #f56565;
box-shadow: 0.4em 0.4em calc(0.4em * 2) #f01414, calc(0.4em * -1) calc(
0.4em * -1
)
calc(0.4em * 2) #f9a6a6;
}
/* ... */
```
### Colors
By default, neumorphism classes will be generated for all of your background colors. Alternatively, you can set these colors explicitly in the config under `neumorphismColor`.
```js
module.exports = {
// ...
theme: {
neumorphismColor: {
red: {
100: '#FBEBE9',
200: '#F5CEC7',
// ...
},
},
},
// ...
}
```
### Sizes
You can change the sizes of the generated neumorphisms using the `neumorphismSize` property. There are 5 sizes by default, ranging from `xs` to `xl`. Setting a key of `default` will generate an unsuffixed class. Values can be generated from any valid sizing unit.
```js
module.exports = {
// ...
theme: {
neumorphismSize: {
xs: '0.05em',
sm: '0.1em',
default: '0.2em',
lg: '0.4em',
xl: '0.8em',
},
},
// ...
}
```
### Variants
The default variants for each neumorphism utility are `responsive`, `hover` and `focus`. These can be configured [like any other tailwind utility](https://tailwindcss.com/docs/configuring-variants/), including being toggled on and off individually.
```js
module.exports = {
// ...
variants: {
neumorphismFlat: ['responsive'],
neumorphismConcave: false,
neumorphismConvex: ['responsive', 'hover'],
neumorphismInset: ['focus', 'active'],
},
// ...
}
```