Question

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

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

HTML：

File -> Project Structure -> Modules -> Select your project -> apply your API

tailwind.config.js：

<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"
>

Answer 1

您必须像这样在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

TailwindCSS：不能为盒子阴影使用断点

1 个答案: