How can I set a table-border spacing in tailwind? below is the css code border-spacing: 0 15px;

CodePudding user response：

There are no default border-spacing classes generated by default. But you can create for your own.

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') }
      )
    }),
  ],
}

Then you can use border-spacing classes. Like;

border-spacing-2

border-spacing-[50px]

border-spacing-[20px_10px]

DEMO

P.S. You have to use border-separate class on table. Because tailwind uses border-collapse by default.

CodePudding user response：

There is no default class for table border spacing in tailwind css. while you can create it with padding class, or use Cellspacing and Cellpadding attributes of table tag.