tailwindcss-claymorphism

v0.11.1TypeScript

Tailwind CSS plugin to generate claymorphism style utilities

tailwindcss claymorphism claymorphic plugin style css

0/weekUpdated 3 years agoMITUnpacked: 19.1 KB

Published by dulltackle

npm install tailwindcss-claymorphism

Repository Homepage 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:

``SH pnpm add -D tailwindcss-claymorphism`

Then load the plugin:

`JS // 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-- setting box-shadow and background-color for you:

`HTML


      class="p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red"
  >
    
      Say hello to 

      Claymorphism
    

          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 👋🏻    >


!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):

`HTML


      class="p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red rounded-3xl"
  >
    
      Say hello to 

      Claymorphism
    

          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 👋🏻    >


!Rounded
Color Palettes
!color-palettes

License

Background

Usage

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

- background-color

box-shadow

border-radius

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

HTML


      class="p-10 text-5xl leading-tight text-white w-max mx-auto clay-md-red"
  >
    
      Say hello to 

      Claymorphism
    

          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 👋🏻    >