Tailwind

MarkAndersonUK

Hi,

I understand the Tailwind support is not officially 'ready' so I am not looking for a solution, only an idea of timeline (if you can give them).

I was using the datatables with the Tech Preview of TailwindCSS support and it works well, Thanks! However, if I turn on 'Scroller' it appears to have CSS that conflicts with the TailwindCSS tech preview CSS. So my question is really to ask if there is any plans to expand TailwindCSS support to the extensions ?? and if there is, are you in a position to give an idea of timescales?

I may take a stab and editing the Scroller CSS myself, but I am no CSS expert

Thank you guys for all you do.

allan

If there is a bit more demand for Tailwind integration with the full DataTables suite, then it is something that I'll look at. Ever since the "tech preview" there hasn't been much in the way of feedback, so it is hard to gauge whether I should spend the time needed to do a full integration or not. I don't want to do it and have it barely used!

I have no immediate plans to work on it - I would like to, but there are other things I'm prioritising at the moment.

Allan

MarkAndersonUK

Thanks Allan...

FYI, to fix my issue with scroller, which revolved around Dark Mode not working, I added the following CSS and it now works just fine.. It certainly isn't a fix for all or a complete conversion, but i thought i'd share just incase it helps anyone:

I edited the 'html.dark' sections of scroller.dataTables.css with :

:is([data-mode=dark] div.dts div.dt-scroll-body table,
     [data-mode=dark] div.dts div.dataTables_scrollBody table) {
  background-color: rgb(19 35 55 / var(--tw-bg-opacity));
}

:is([data-mode=dark] div.dts div.dts_label) {
  background: rgba(255, 255, 255, 0.8);
color: black;
}

:is([data-mode=dark] div.dts div.dt-scroll-body,
     [data-mode=dark] div.dts div.dataTables_scrollBody) {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025) 10px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 20px);
}

allan

Nice one - thanks for sharing that with us!

Allan