Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dulltackle/tailwindcss-claymorphism
Tailwind CSS plugin to generate claymorphism style utilities
https://github.com/dulltackle/tailwindcss-claymorphism
claymorphism css tailwind tailwindcss tailwindcss-plugin
Last synced: about 2 months ago
JSON representation
Tailwind CSS plugin to generate claymorphism style utilities
- Host: GitHub
- URL: https://github.com/dulltackle/tailwindcss-claymorphism
- Owner: dulltackle
- License: mit
- Created: 2022-08-03T07:21:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T18:21:03.000Z (about 2 months ago)
- Last Synced: 2024-07-31T22:33:11.465Z (about 2 months ago)
- Topics: claymorphism, css, tailwind, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://dulltackle.github.io/tailwindcss-claymorphism/
- Size: 127 KB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Claymorphism - Adds `clay` utilities for creating claymorphism style. (Plugins)
README
# tailwindcss-claymorphism
Add claymorphism style classes to your [Tailwind CSS](https://tailwindcss.com/docs/what-is-tailwind/) project.
> This plugin is inspired by [clay.css](https://github.com/codeAdrian/clay.css).
## Background
> Claymorphism is a fresh new concept. The name was coined by [MichaΕ Malewicz](https://hype4.academy/articles/design/claymorphism-in-user-interfaces) 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
```
Then all you need to do is crafting the round corner with build-in utilities class `rounded`(to make the element look like [Squircle](https://en.wikipedia.org/wiki/Squircle)):
```HTML
```
## 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) License Β© 2022-Present [dulltackle](https://github.com/dulltackle)