仅在顶部/底部/左侧/右侧启用悬停

Posted 2023-03-07

【中文标题】仅在顶部/底部/左侧/右侧启用悬停

【英文标题】：Enable hover only on top/bottom/left/right

【发布时间】：2021-06-14 17:49:19

【问题描述】：

我正在尝试在 Tailwind 文件配置中创建一个变体。 我想要的是像hover:border-l-4 hover:border-green-400 这样的类，它可以在左侧（或仅在顶部/底部/右侧）启用边框。

所以我在 tailwind.config.js 内部创建了这个：

module.exports = 
  purge: 
    enabled: process.env.NODE_ENV === 'production',
    content: ['./src/**/*.html', './src/**/*.js,ts,jsx,tsx'],
  ,
  darkMode: false, 
  theme: 
    extend: 
      colors: 
        ...
      ,
    ,
    borderLeft: (theme) => (),
    ...
  ,
  variants: 
    extend: 
      borderLeft: ['hover', 'focus']
    ,
  ,
  plugins: [],

它不起作用。我得到TypeError: variantsValue is not iterable。

我没有在文档页面中找到任何有用的东西。

【参考方案1】：

结帐docs on tailwind。

  variants: 
    extend: 
      borderWidth: ['hover'],
    
  

从这里开始，hover:border-l-4 hover:border-green-400 将起作用。