karakatiza666 / tailwindcss-neumorphism

Generate soft UI CSS code using tailwindcss

tailwindcss-neumorphism

Generate soft UI CSS code using tailwindcss

Demo

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'],
  },
  // ...
}