The row button style depends on tailwind to work

[beetcb]

Describe the bug I followed the documentation along the way, there is no mention of the need to import additional tailwindcss.

To Reproduce Steps to reproduce the behavior: Just follow the docs example: https://gridjs.io/docs/examples/row-buttons

Here you use tailwind ( Maybe it is a good idea to demonstrate about the external css ？ )

formatter: (cell, row) => {
  return h('button', {
    className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
    onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
  }, 'Edit');
}

[afshinm]

I'm not quite sure if I understand this issue. Grid.js does not depend on Tailwind (or any other libs). Your button should work even if you remove the className attribute.

[beetcb]

@afshinm Sorry to bother you, but when I actually use it, the button style is indeed different from the example, so I would be rather grateful if you could please take a look at the code and tell me what's wrong. Thanks!

Here is the demo for reproducing

It shoud be:

Yet this is what I get:

[afshinm]

@beetcb this is just a styling issue. When you say "is indeed different from the example" do you mean the examples on gridjs.io? We use TailwindUI on gridjs.io (the Grid.js website/doc) but that functionality is not available on Grid.js (the Grid.js library). You need to manually include the Tailwind CSS to fix that.

[beetcb]

do you mean the examples on gridjs.io

Yes, this is exactly what I meant

You need to manually include the Tailwind CSS to fix that.

And I suggest you specify this condition in the documentation if possible.

Thank you for the answer! @afshinm

[afshinm]

Makes sense! thanks.

[beebase]

So is there an example in the docs how to include tailwind?

[dustinwelch]

I found that adding a style to the button also works: formatter: (cell, row) => { return gridjs.h('button', { style:{ 'background-color': 'rgba(13, 110, 253, 0.7)', color: '#FFF', border:'1px solid #000', 'border-radius': '3px' }, onClick: () => function() }, 'Edit'); }