tailwindcss-neumorphism

Generate soft UI CSS code using tailwindcss

Fork Additions

Fixed the catch error and added group hover variants

Why?

This plugin is inspired by neumorphism.io, as well as this article by Michal Malewicz which I highly recommend you check out.

Getting Started

Install via npm or yarn

npm install tailwindcss-neumorphism

yarn add tailwindcss-neumorphism

Then just require it as a plugin.

// tailwind.config.js
module.exports = {
  plugins: [require('tailwindcss-neumorphism')],
}

The plugin will generate 4 different utilities per color, in any number of sizes (default 5).

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

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.

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, including being toggled on and off individually.

module.exports = {
  // ...
  variants: {
    neumorphismFlat: ['responsive'],
    neumorphismConcave: false,
    neumorphismConvex: ['responsive', 'hover'],
    neumorphismInset: ['focus', 'active'],
  },
  // ...
}

xndbogdan / tailwindcss-neumorphism