Расстояние между границами в Tailwind React

Question

Итак, я хочу выполнить следующий css в div:

      border-spacing:0

Как этого добиться при попутном ветре. Я читал о добавлении утилит, но не понимал, как это сделать в Reactjs.

Примечание: я хочу, чтобы граница была разделена, а граница-интервал -0, чтобы граница оставалась неизменной с заголовком.

Answer 1

Я предполагаю, что ваша проблема заключается не только в применении css к tailwind, но и в установке tailwind в reactjs, для этого прочитайте это руководство по установке.

И чтобы добавить класс интервала между границами в div, сделайте

<div className="border-spacing-0"> </div>

Answer 2

Думаю, этот метод может вам помочь

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

Answer 3

Как вариант, вы можете сделать это с помощью своего 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 не ограничивает вас классами стиля.