Integration of tailwind css

mrhumble

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi guys, I was working with datatables and it is a very nice tool. Does datables have an integration with tailwindcss?

colin

I did a Google search as I've not heard of Tailwind, and this codepen came up, so maybe that'll help you,

Colin

Schonhoff

Hi,

I would love to see an integration of Tailwind CSS. https://tailwindcss.com/
It is highly supported for the Laravel community and framework on the new versions. It is a utility based CSS framework but maybe you can make a nice look for it.

But thanks for the Bootstrap 5 update and the codepen. Maybe it will help me to integrate both.

allan

Thanks for the feedback. Tailwind would be a good one to add. We'll look at doing a tech preview sometime - that is our first stage to try and get more feedback.

Allan

NoxxEff

My latest project is based on Tailwind CSS. That's why I'm eagerly waiting for the integration.

jim1506

I am moving away from usual CSS as Tailwind is much better, espeically allowing different screen sizes to be used in one place. I use and have used Datatables for some years and I really do think adding TailwindCSS support\version would be amazing. Laravel is rapidly moving to Tailwind and so there is a huge market.

allan

I might be missing it in their docs, but there doesn't appear to be much in the way of customisation for tables in Tailwind? This is more or less all I could see?

Allan

murrant

@allan Tailwind CSS is not Bootstrap it does not dictate a certain style. For example here is a button with a hover effect and rounded corners:

<a role="button" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-md">Button</a>

for alternating row background colors you have to enable the odd (or even) variant in the config

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['odd'],
    }
  },
}

<tr class="odd:bg-grey-100"><td>content</td></tr>

To allow users to set up their own styles. Simply allowing class to be set on most elements is enough. It would be cool to have a base example of configuring those classes for Tailwind in the docs or somewhere. Could give users a jump start and allow them to customize the appearance easily from the base.

allan

Many thanks for the explanation. It sounds like it could get quite verbose for things like the table headers and so on. I'd be very happy to include a demo if someone more familiar with Tailwind wanted to put something together though.

Regards,
Allan

ayz

The whole point of Tailwind is so all sites do not look same (as was the case with Boostrap). Having said that, here's a pretty decent (and commonly used) look for Tailwind tables along with the code. It looks much same as the rendition of the TailwindCSS makers themselves. I would love to have that look built into DT as the standard Tailwind theme.

In terms of verbosity, Tailwind allows building re-usable CSS level components with @apply.

Being more of a back-end dev, I'm finding it hard to wrap my head around the best path to achieve the look. Are you really going to use TailwindCSS in DT or will simply study the final CSS of e.g. the tables linked above and replicate them. Or is it easier to manually replicate them in the SCSS tab here. Achieving the Tailwind look referenced above goes beyond colours; margin, padding, etc etc come in.

allan

That is a real nice looking table!

That said, if the point of Tailwind is that every site is different and there are no base styles, creating a base style for DataTables seems to me to be counter to what they are trying to do?

It sounds to me like the easiest approach to style DataTables with Tailwind would be for each developer to customise the classes we use to suit their site. Not as easy as things like Bootstrap which are plug-in play, but from your description, that is part of the appeal of Tailwind.

Allan

Schonhoff

Hi @allan,

it would be awesome to see DataTables have a base layout of Tailwind.

There might be no base styling for Tailwind because it is utility-first instead of component based. But you could provide a file with a base layout which can be overwritten by classes. Maybe that could be a possible solution for the demand.

I would love to see something like the table mentioned from @ayz as a base. The Tailwind devs are working on Tailwindui as a "component-website" for Tailwind. Maybe that would be a possible base layout of a DataTables table which can be overwritten with custom classes in another file like you can already do with Bootstrap DataTables.

ayz

@Schonhoff has put it very succinctly: echo that!

ayz

@allan : you linked to a js file. Is this where you meant to link to rather? Meaning, to customize the common.css and jquery.datatables.css?

szogyenyi

I am one of the project maintainers from Flowbite and we already have a table component coded in Tailwind CSS.

I've used DataTables previously, and I'm thinking that we may actually work on Tailwind CSS/Flowbite support for DataTables. If there's enough interest, we'll get it done.

allan

That would be awesome. Any input on creating a Tailwind integration for DataTables would be very welcome.

This is how we do the Bootstrap 5 integration:

• SCSS
• JS

The other integrations are similar and Tailwind should follow the same pattern. Very happy to answer any questions about it.

Regards,
Allan

szogyenyi

Thanks for the insight.

There are two ways to go about it:

1. Use the @apply directives in a CSS file that will be included
2. Apply the utility classes to the HTML directly from JS and there will be no need to include a CSS file anymore

Which one do you think would be preferable?

Either way, we can use the design system from Flowbite as a reference.

Cheers,
Zoltan

allan

Hi Zoltan,

There is a change we might need to use a little bit of both! Generally, I prefer to use the utility classes if possible - for example in the Bootstrap 5 example I linked to above you'll see it sets Bootstrap suitable classes on DataTable.ext.classes.

We don't have proper end user facing documentation for all the classes I'm afraid, but this file is where all the defaults are, and the other integration files will hopefully be of some use.

We'll almost certainly need to add one or two little overrides here and there as well, to make things fit together. For example the Select extension will probably need its own CSS file, unless Tailwind provides row highlighting / selection for table rows.

Allan

karmendra

Hi @allan ,

I come across Flowbite, it a tailwind component library and it also has its onw js for moveable components like dropdown etc.
So its like bootstrap done using tailwind.
It has a good set of free components that can be used to build the DT theme.

https://flowbite.com/docs/components/tables/

I wanted to know how can I create my own dataTables.flowbite.css like dataTables.bootstrap5.css, I mean is there any documentation that I can follow to create new styling.

Also as I am a big fan of Datatable Editor I want to extend this to the Popup Forms, how can I create themes for Editor?

Another very good tailwind component library is TailwindUI and its from the Tailwind creator himself, but its a paid library. https://tailwindui.com/components/application-ui/lists/tables. (Adding this here to compare with Flowbite to assert that flowbite free versions are comparatively neat)

Thanks
Karmendra

allan

Flowbite looks great.

I mean is there any documentation that I can follow to create new styling.

Not really I'm afraid. The starting point would be the existing styling integrations and then asking here in the forum about any specific cases you are unsure about.

Also as I am a big fan of Datatable Editor I want to extend this to the Popup Forms, how can I create themes for Editor?

Exactly the same way as for DataTables and all the other extensions - using an integration file. Editor has a displayController plug-in type which can be used for custom modals. That is how the Bootstrap, etc, modal is used. Again you might benefit from referring to the existing integrations.

Regards,
Allan

ayz

@szogyenyi: are you still working on the Tailwind/Flowbite integration or you found not enough interest?

Is it better to use the Tailwind classes or would it make sense to just implement the specific underlying CSS classes that give the specific look and feel of Flowbite's tables?

ayz

@allan : I compared the js/scss files for BS5 against Bulma and found there isn't an exact one-to-one mapping of selectors/ functions.

How does one even approach integrating a different CSS framework?

Also what is your best estimate of time required (hours) for an intermediate level CSS/JS skilled person to achieve it (i.e. the TailwindCSS tables look above)

allan

The BS5 integration file is a good starting point.

The full list of classes available is here and then it is primarily the paging renderer that needs to be done.

Honestly, I don't know how long a DataTables core integration would take - perhaps a couple of hours for myself, I don't know what skill set you have, so I can't really say. I hadn't committed time to a Tailwind integration yet myself as it isn't so much the DataTables core part that I think that will eat time, but all the other extensions such as AutoFill, etc. Editor too would take time.

It is totally doable, and it is on my list, but it just hasn't bubbled to the top yet.

Allan

allan

I've been looking at this again, and I wonder if TailwindUI would be the correct way to do this integration. For example, the pagination control that is in TailwindUI could be built using TailwindCSS - but I don't want to build and support a set of CSS styles built upon TailwindCSS.

TailwindUI is a paid for product though. So, how do you all feel about this approach?

Tailwind Elements would be another option - but that would be a separate integration, and it isn't clear to me how popular that is, compared to TailwindUI (I can't see any mention of it in this thread).

Edit: I've also just found daisyUI which is another set of components built upon TailwindCSS.

There isn't going to be a way to do a single integration that would work for all of these - we'd end up with integrations for:

• TailwindUI
• daisyUI
• and a custom "base" I could create - which wouldn't actually be of any use to their of the two other TailwindCSS integrations, and would need to be customised by anyone who wants their own styling. And as I say, I don't want to develop pagination etc controls for Tailwind.

It would fragment really quickly, and I'm not seeing a significant demand for any of these integrations.

Feedback is very welcome!

Allan

benlwong

I was just researching if DataTables supports TailwindCSS and find this thread. We use TailwindUI so my vote would be for that.

Not sure if it matters, but TailwindUI is by the team that created/supports Tailwind CSS. So to me, it is the "official" component/library package.

allan

Thanks for the comment! Hopefully we can get a few others commenting. Certainly TailwindUI was what I was leaning towards.

Schonhoff

We use TailwindUI, too. It makes a lot of sense for me to use this because it is the official package from the Tailwind Team. Of course you need to pay for it and can't use it without a licence but in my opinion an official package makes a lot more sense.
Hope a lot more people will present their feedback on the topic.

Miheer

We also use TailwindCSS at Equip.co.

allan

@Miheer - Do you use TailwindUI, another framework or just TailwindCSS and build your own components?

Allan

ayz

@allan: I’d vote for TailwindUI looks but understand your concerns.

I would opt for the generic “base” approach if it can be easily adapted and work smoothly to achieve the look of anything TailwindCSS-based. I wonder what would be involved getting the whole TailwindUI suite done off it though.

sikrew

@Alan:
I use TailwindUi almost exclusively for all my projects. As others already pointed out, it would be a great add-on to Datatables if TailwindUi were to be integrated as it would make our lives much easier

As for making my own components, whenever I need to do so, I always resort to TailwindCSS classes for styling.