仅在 top/bottom/left/right 上启用悬停

Question

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

所以我在里面创建这个 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.

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

Answer 1

结帐docs on tailwind。

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

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

仅在 top/bottom/left/right 上启用悬停

Enable hover only on top/bottom/left/right

tailwind-css

tailwind-in-js