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>

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>

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

License

MIT License © 2022-Present dulltackle