Tailwind React 中的边框间距

【问题标题】：Border Spacing in Tailwind ReactTailwind React 中的边框间距
【发布时间】：2021-07-23 08:13:10
【问题描述】：

所以，我想在一个 div 上执行以下 css：

border-spacing:0

如何在顺风中实现这一目标。我阅读了有关添加实用程序的信息，但不明白如何在 Reactjs 中这样做。

注意：我想要border-separate和border-spacing-0，这样边框与标题保持不变。

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

我觉得这个方法可以帮到你

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

【讨论】：

我可以在tailwind.config.js 中添加一些东西吗？
我不明白你的意思，但你可以在 tailwind.config.js 中添加所有内容

【解决方案2】：

作为一个选项，您可以使用 input.css 添加：

table { 
  border-spacing: 0; {/* or anything else */}
}

作为一般选项并运行这行代码以在您的应用中使用 tailwind.css 构建您的输出：

npx tailwindcss --input path/to/your/input.css  --output path/to/your/tailwind.css --minify

tailwind 并不局限于它的样式类。

【讨论】：