Tailwindcss-claymorphism NPM

tailwindcss-claymorphism

Add claymorphism style classes to your Tailwind CSS project.

This plugin is inspired by clay.css.

Background

Claymorphism is a fresh new concept. The name was coined by Michał Malewicz and the designers are excited to explore the possibilities of this approach to UI design.
It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.
What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.

Install

With PNPM:

pnpm add -D tailwindcss-claymorphism

Then load the plugin:

// tailwind.config.cjs
module.exports = {
  content: [/* ... */],
  plugins: [require("tailwindcss-claymorphism")],
};

Usage

To achieve claymorphism, you need to craft the following properties:

background-color
box-shadow
border-radius

The plugin provides utilities classes clay-<boxShadowSize>-<backgroundColor> setting box-shadow and background-color for you:

<div class="bg-amber-300 py-10 font-sans">
  <div
    class="p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red"
  >
    <p>
      Say hello to <br />
      <span class="font-semibold">Claymorphism</span>
    </p>
    <a
      href="https://github.com/dulltackle/tailwindcss-claymorphism"
      target="_blank"
      rel="noreferrer"
      class="block w-max mx-auto mt-4 px-4 py-2 text-3xl clay-sm-orange"
      >Hi 👋🏻</a
    >
  </div>
</div>

Basic

Then all you need to do is crafting the round corner with build-in utilities class rounded(to make the element look like Squircle):

<div class="bg-amber-300 py-10 font-sans">
  <div
    class="p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red rounded-3xl"
  >
    <p>
      Say hello to <br />
      <span class="font-semibold">Claymorphism</span>
    </p>
    <a
      href="https://github.com/dulltackle/tailwindcss-claymorphism"
      target="_blank"
      rel="noreferrer"
      class="block w-max mx-auto mt-4 px-4 py-2 text-3xl clay-sm-orange rounded-xl"
      >Hi 👋🏻</a
    >
  </div>
</div>

Rounded

Color Palettes

color-palettes

utility class	background-color
`clay-sm-red` / `clay-md-red`	`#f87171`
`clay-sm-orange` / `clay-md-orange`	`#fb923c`
`clay-sm-yellow` / `clay-md-yellow`	`#facc15`
`clay-sm-green` / `clay-md-green`	`#4ade80`
`clay-sm-emerald` / `clay-md-emerald`	`#34d399`
`clay-sm-teal` / `clay-md-teal`	`#2dd4bf`
`clay-sm-cyan` / `clay-md-cyan`	`#22d3ee`
`clay-sm-sky` / `clay-md-sky`	`#38bdf8`
`clay-sm-blue` / `clay-md-blue`	`#60a5fa`
`clay-sm-indigo` / `clay-md-indigo`	`#818cf8`
`clay-sm-violet` / `clay-md-violet`	`#a78bfa`
`clay-sm-purple` / `clay-md-purple`	`#c084fc`
`clay-sm-fuchsia` / `clay-md-fuchsia`	`#e879f9`
`clay-sm-pink` / `clay-md-pink`	`#f472b6`
`clay-sm-rose` / `clay-md-rose`	`#fb7185`
`clay-sm-lime` / `clay-md-lime`	`#a3e635`
`clay-sm-amber` / `clay-md-amber`	`#fbbf24`
`clay-sm-slate` / `clay-md-slate`	`#94a3b8`
`clay-sm-gray` / `clay-md-gray`	`#9ca3af`
`clay-sm-zinc` / `clay-md-zinc`	`#a1a1aa`
`clay-sm-neutral` / `clay-md-neutral`	`#a3a3a3`
`clay-sm-stone` / `clay-md-stone`	`#a8a29e`