Add claymorphism style classes to your Tailwind CSS project.
This plugin is inspired by clay.css.
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.
With PNPM:
pnpm add -D tailwindcss-claymorphism
Then load the plugin:
// tailwind.config.cjs
module.exports = {
content: [/* ... */],
plugins: [require("tailwindcss-claymorphism")],
};
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>
MIT License © 2022-Present dulltackle