如何设置 table border-spacing in tailwind css

Question

如何在 tailwind 中设置 table 边框间距？下面是 css 代码 border-spacing: 0 15px;

Answer 1

tailwind css 中的 table 边框间距没有默认值 class。虽然您可以使用填充 class 创建它，或者使用 Cellspacing 和 Cellpadding table 标签的属性。

Answer 2

没有默认生成的border-spacing classes。但您可以自己创建。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addUtilities, matchUtilities, theme }) {
      // add default utilies for border-spacing
      addUtilities({
        '.border-spacing-2': {
          'border-spacing': '0.5rem',
        },
        '.border-spacing-4': {
          'border-spacing': '1rem',
        },
      })

      // add dynamic match for arbitrary values, like border-spacing-[50px]
      matchUtilities(
        {
          'border-spacing': (value) => ({
            'border-spacing': value,
          }),
        },
        { values: theme('borderSpacing') }
      )
    }),
  ],
}

那你就可以用border-spacing classes了。喜欢;

border-spacing-2

border-spacing-[50px]

border-spacing-[20px_10px]

DEMO

P.S. 您必须在 table 上使用 border-separate class。因为tailwind默认使用border-collapse.

如何设置 table border-spacing in tailwind css

How to set table border-spacing in tailwind css

css

tailwind-css