css - TailwindCSS:不能为盒子阴影使用断点

我是第一次尝试TailwindCSS，看来我不能为盒子阴影使用断点。除盒子阴影外，其他所有断点都工作正常。

顺便说一句，我正在使用自定义的盒子阴影。

HTML：

<div
   class="w-auto h-screen pl-10 mt-20 pt-12 absolute left-0 top-0 bg-gray-900 shadow-menu md:shadow-none"
>

tailwind.config.js：

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {},
  plugins: []
};

最佳答案

您必须像这样在Pseudo-Class Variants中为boxShadow启用tailwind.config.js：

boxShadow: ['responsive', 'hover', 'focus']

这将允许您根据响应类，悬停或集中调整boxShadow。

您的tailwind.config.js将如下所示：

module.exports = {
  theme: {
    fontFamily: {
      base: ["Quicksand", "sans-serif"],
      title: ["Belgrano", "serif"]
    },
    extend: {},
    boxShadow: {
      menu: "0 3px 5px rgba(0,0,0,0.2)"
    }
  },
  variants: {
    boxShadow: ['responsive', 'hover', 'focus']
  },
  plugins: []
};

我希望这有帮助。

资源https://tailwindcss.com/docs/pseudo-class-variants/#app

关于css - TailwindCSS:不能为盒子阴影使用断点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59413611/