TailwindCSS：不能为 box-shadow 使用断点

【问题标题】：TailwindCSS: Can't use breakpoints for box-shadowTailwindCSS：不能为 box-shadow 使用断点
【发布时间】：2020-04-12 06:43:44
【问题描述】：

我是第一次尝试 TailwindCSS，但似乎我不能为盒子阴影使用断点。除了 box-shadow 之外，所有其他断点都可以正常工作。

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

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: []
};

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

您必须在您的tailwind.config.js 中为boxShadow 启用Pseudo-Class Variants，如下所示：

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

【讨论】：