neomorphism-in-tailwind

Install

npm install --save-dev neomorphism-in-tailwind

Usage

/* tailwind.config.js */
module.exports = {
	/* ... */
	theme: {
		/* ... */
		colors: { /* colors */ },
		neomorphism: {
			sources: {
				"l": 0,
				"lt": Math.PI * (1 / 4),
				"t": Math.PI * (1 / 2),
				"rt": Math.PI * (3 / 4),
				"r": Math.PI,
				"rb": Math.PI * (5 / 4),
				"b": Math.PI * (3 / 2),
				"lb": Math.PI * (7 / 4),
			},
			distances: {
				"xs": "3px",
				"sm": "7px",
				"base": "11px",
				"md": "15px",
				"lg": "20px",
				"xl": "25px",
				"2xl": "30px",
				"3xl": "35px",
				"4xl": "40px",
				"5xl": "45px",
				"6xl": "50px"
			},
			blurs: {
				"sm": (value) => `calc(1 * var(${value}))`,
				"base": (value) => `calc(2 * var(${value}))`,
				"md": (value) => `calc(3 * var(${value}))`
			}
		},
	},

	variants: { 
		/* ... */
		/* all the following default to ['responsive', 'hover', 'focus', 'active'] */
		neomorphism: ['responsive', 'hover', 'focus', 'active'],
	},

	plugins: [
		require('neomorphism-in-tailwind')
	],
}

函數

._nmp_

box-shadow

._nmp_drop

drop-shadow

._nmp_text

text-shadow

參數

.-nmp_src--[<source>] : 光線位置

無預設

.-nmp_shape--[ inner | outer ] : 凹入 | 凸出

預設為 outer

.-nmp_dist--[ <dist> ] : 光影距離大小

無預設

.-nmp_dist-light--[ <dist> ] : 光線距離大小

無預設

.-nmp_dist-shadow--[ <dist> ] : 陰影距離大小

無預設

.-nmp_color--[ <color> ] : 光影顏色

預設為 transparent

.-nmp_light--[ <color> ] : 光線顏色

預設為 transparent

.-nmp_shadow--[ <color> ] : 陰影顏色

預設為 transparent

.-nmp-blur--[ <blur> ] : 光影模糊程度

預設為 base

.-nmp_blur-light--[ <blur> ] : 光線模糊程度

預設為 base

.-nmp_blur-shadow--[ <blur> ] : 陰影模糊程度

預設為 base

範例

<div class="_nmp_ -nmp_src--lt -nmp_light--pink-700 -nmp_shadow--black -nmp_dist--xs active:-nmp_shape--inner">
    使用 _nmp_ 函數
    -nmp_src--lt : 光線從左上方照過來
    -nmp_light--pink-700 : 光線顏色設定為 pink-700
    -nmp_shadow--black : 陰影顏色設定為 black
    -nmp_dist--xs : 光影距離大小設定為 xs
    active:-nmp_shape--inner : 點擊時將 shape 設定為 inner
</div>

自定義

可藉由 css 變數擴充參數

各 css 變數所掌管的效果

/* 光亮處顏色 */
--nmp-color-light : rgba();

/* 陰影處顏色 */
--nmp-color-shadow : rgba();

/* 凹入 */
--nmp-inner : inset;
/* 凸出 */
--nmp-inner : ;

/* 光線距離大小 */
--nmp-dist-light : px;
/* 陰影距離大小 */
--nmp-dist-shadow : px;

/* 光線模糊 */
--nmp-blur-light : px;
/* 陰影模糊 */
--nmp-blur-shadow : px;

/* 光源平行偏移 */
--nmp-light-x : number;
/* 光源垂直偏移 */
--nmp-light-y : number;
/* 陰影平行偏移 */
--nmp-shadow-x : number;
/* 陰影垂直偏移 */
--nmp-shadow-y : number;
/* 用於調整光源方向 */
/* number 是單純數字，不加單位 */