Customizing Box Shadow - Taco

Customize the default box shadow for @material-tailwind/html and add your own custom box shadow values that you like to have for your project.

Default Box Shadow

@material-tailwind/html provides a set of default box shadow values that you can use.

const boxShadow = {
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
  DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
  none: "0 0 rgb(0, 0 / 0, 0)",
};

Customizing The Default Box Shadow

You can customize the default box shadow values for @material-tailwind/html very easy and straightforward, it's the same as customizing box shadow values for tailwindcss.

You just need to customize the box shadow value that you like through the boxShadow object for tailwind.config.js file.

        
        module.exports = withMT({
          theme: {
            boxShadow: {
              sm: "0 2px 4px 0 rgb(0 0 0 / 0.05)",
              // rest of the box shadow values
            },
          },
        });
        
        

Adding New Box Shadow

You can add new box shadow value for @material-tailwind/html very easy and straightforward, it's the same as adding new box shadow value for tailwindcss.

You just need to add your own box shadow value to the extend and boxShadow object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    extend: {
      boxShadow: {
        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
      },
    },
  },
});

For more information about tailwindcss box shadow customization, please check the TailwindCSS Documentation