Skip to content

Instantly share code, notes, and snippets.

@SpenceDiNicolantonio
Last active May 2, 2024 16:43
Show Gist options
  • Save SpenceDiNicolantonio/020a22c858222648ddecbefb7aa410ca to your computer and use it in GitHub Desktop.
Save SpenceDiNicolantonio/020a22c858222648ddecbefb7aa410ca to your computer and use it in GitHub Desktop.
Tailwind paper shadow #tailwind #css #material-design
module.exports = {
theme: {
extend: {
boxShadow: {
'paper-xs': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
'paper-sm': '0 2px 4px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.24)',
paper: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
'paper-md': '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
'paper-lg': '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
'paper-xl': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
'paper-inner-xs': 'inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24)',
'paper-inner-sm': 'inset 0 2px 4px rgba(0,0,0,0.14), inset 0 2px 4px rgba(0,0,0,0.24)',
'paper-inner': 'inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23)',
'paper-inner-md': 'inset 0 10px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23)',
'paper-inner-lg': 'inset 0 14px 28px rgba(0,0,0,0.25), inset 0 10px 10px rgba(0,0,0,0.22)',
'paper-inner-xl': 'inset 0 19px 38px rgba(0,0,0,0.30), inset 0 15px 12px rgba(0,0,0,0.22)',
},
},
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment