TailwindCSS中top属性结合calc()函数失效问题咨询

不需要额外引入TailwindCSS类，问题出在自定义值的语法和定位规则上：

• 语法细节错误：top-[calc(100%-5rem)]里的减号两侧没有空格，Tailwind的类名解析器会把整个表达式当成一个无法识别的字符串，必须给减号两边添加空格，并用下划线替代类名里的空格，改成top-[calc(100%_-_5rem)]；也可以用引号包裹表达式，写成top-["calc(100% - 5rem)"]
• 定位规则缺失：绝对定位元素必须搭配定位类才能让top属性生效——给父元素加relative，目标元素加absolute，否则浏览器不会应用top属性的设置
• 样式优先级覆盖：带有data-shop-area属性的元素，如果存在其他优先级更高的样式（比如内联样式、带!important的类），会覆盖calc设置的top值，用浏览器开发者工具查看元素的computed样式就能确认

如果觉得自定义类写法繁琐，也可以在tailwind.config.js里扩展自定义top值：

module.exports = {
  theme: {
    extend: {
      top: {
        'offset-5rem': 'calc(100% - 5rem)',
        'offset-20px': 'calc(100% - 20px)',
      },
    },
  },
}

之后直接使用top-offset-5rem、top-offset-20px这类类名，更直观且不易出错

内容的提问来源于stack exchange，提问作者AlThePal78