What would it take on Patreon or something like that to get a tailwind package rolled out?
Kidding aside (well, kidding, but not kidding) we're moving into a tailwind application and have a pretty robust bs-4 based editor/datatable instance. I'd love to migrate it over to a tailwind instance, and re-up our editor sub.
Does anyone know how to get in touch with the Tailwind UI people? I'm not clear on how the licensing would work if I were to do a DataTables integration. I dropped them an e-mail to their support address, but no reply yet. If anyone has a contact there, that would be really useful.
I've actually just heard back. They'd prefer not to have a Tailwind UI component integration with DataTables. That's fair enough - entirely their call.
Where does that leave a DataTables integration with Tailwind? We can still use Tailwind CSS, as it is open source (MIT license). It would just mean that components such as paging need to be recreated rather than using existing components.
That's perfectly do-able, but it will take additional time and effort. Still, there is obviously interest, so I will look to do a prototype integration with Tailwind CSS.
Hm, too bad! I wouldn't be opposed to paying for both the Editor and TailWindUI licenses to make that happen, but I guess they're probably not up for that either.
I think it's the best to integrate with Tailwind CSS, and leave options for us to change the classes used, so anyone can just integrate with any frameworks that use with Tailwind CSS easily.
Very happy that TailwindUI rejected the integration. TailwindCSS is wonderful and it would be really really a shame to have its datatables integration locked behind paywalls. DaisyUI or vanilla seems the way to go so +1 from me as well.
another Plus one for vanilla TailwindCSS, this would allow us to add the utility classes we want to use instead of being locked into someone's judgement. I understand the complication since tw is a completly different utility class approach to css. Trying to make it flexible yet provide basic enough style to make dataTables function correctly could be a challenge.
@jbradfield: does this not depend on the accessible/published theme classes of Datatables being granular enough to be able to implement the desired look and feel fully?
You're right this sounds simpler but given @allan never suggested it, I suspected the approach has limitations. Not holding brief though :-)
To me honest, it was more because I hadn't thought of that . It does look like a perfectly valid approach, although I think I'd prefer a Tailwind integration that doesn't depend on the existing DataTables styles. I've not had a chance to dig into this yet, but it is moving steadily up my list
I'm switching to tailwind css and I'm so very much hoping that it won't create any problems with our existing DataTables implementation. tailwind is a steep learning curve but so is css. I would hope that a tailwind option on DT doesn't add too much more to the complexity.
Yes, support that idea. Like say other: Atom CSS approach open new way for this plugin to be fully customizable. It can be used to recreate all other frameworks styles and new custom too. Last thinks to have it working
I would just make an integration for Tailwind because anything else that uses Tailwind (i.e. DaisyUI) will also work if the datatables integration is built just for Tailwind. I hope that makes sense what I am trying to say.
The issue is that Tailwind is a set of base utilities, not components. So for example DataTables needs a paging component. I could certainly create a paging component with Tailwind CSS, but it would be different from that created by Tailwind UI, or some other Tailwind component library. So the worry is that there would be no visual consistency.
Its probably the way that it needs to be done though, since I can't do Tailwind UI integration.
I've been building Tailkit (UI component library) with Tailwind CSS the past 3 years. Having read this thread and having received questions multiple times about DataTables support, I thought that I should let you know that I can provide styles from Tailkit to save you time.
This way, you could build a base styling for Tailwind CSS support and afterwards someone using DataTable.ext.classes could override the classes to match his preference.
Feel free to get in touch if you are interested, so I can give you access to the styles that might be helpful for this integration.
You can preview some examples at (everything with dark mode support):
Good to hear form you again! Thanks for your generous offer! I'll take you up on that please. I'm still concerned that using Tailkit will limit the appeal of a Tailwind CSS integration for DataTable to just the sub-set of Tailwind CSS users who happen to use Tailkit (e.g. everyone using Tailwind UI might not find it useful), but this might be a good way for me to get started in this direction.
You're very welcome Allan, kindly check your inbox as I have just sent you an email!
I believe this integration will be helpful because pagination/table/buttons (simple variation) design is subtle and would blend nicely with various designs (it should be a good starting point at least).
In my perspective, this theming option could be communicated as 'a boilerplate for Tailwind CSS.' Something along these lines: 'This is how you could use Tailwind CSS to style DataTables, so feel free to apply your designs in a similar way to make it perfect for your case.'.
Personally I was using Flowbite for some components so definitely +1 for that.
Also It would be great to have an instruction on how to do full customization with Tailwind CSS. From what I understand we need to take all the selectors from jquery.dataTables.css and use the apply directive to do the customization.
To be honest, your post nicely highlights the problem with Tailwind CSS integration for DataTables- it isn't just an integration for Tailwind CSS itself, but it might require multiple integrations, each one diluting the number of people who would use it while increasing the maintenance required. Your list also didn't include plain Tailwind CSS, nor Tailwind UI (which per the discussion above, isn't an option unfortunately).
My current plan is to try an integration through Tailkit thanks to John's support. I might get a change to do that this week for DataTables core, but I'll need to see how it goes. From there we'll see how well that works alongside the other Tailwind CSS based UI components. I've got hopes that it will work well, although inevitably there will be styling differences.
You'll note on the page that only Tailwind CSS is loaded, not a component library that builds on top of Tailwind CSS. While this might mean that the integration doesn't perfectly align with the styles of your page, it does provide a framework that you could then customise further if you need.
If you want to try this out, you can do so with DataTables 1.13.5 core, and:
This is only for DataTables core - I haven't worked on any of the extensions yet. If you want to customise it, the key is the DataTable.ext.classes.tailwindcss object. I've used that and mapped to DataTables rather horrible property names (nor completely, but I'll progress that more). Moving forward, I think this is going to be the correct approach for theming, and I'll adopt it in a wider sense with v2.
The integration isn't perfect yet - the processing panel I've just spotted needs to be updated for example, but I think its a decent start.
Moving forward - it seems to me that using Tailwind CSS is basically just inlining the styles in class names. That presents a little bit of a problem in some parts of the DataTables code, since not every element gets its own class name. In many cases I've expected the separation of style and behaviour and assumed a specific DOM structure. For example I often use the > child selector rather than adding a specific class to an element if I know the structure is fixed. That doesn't seem to align with how Tailwind CSS operates, so there might need to be some changes to add class names to elements that don't need them for other styling integrations.
There will also likely be some cases where I use CSS rather than Tailwind CSS classes - for example the sorting icons in the table at the moment. That might change over time and as my understanding of Tailwind CSS evolves. I haven't really "got it" yet - I haven't really seen the advantage of writing styles this way over using CSS, but this is my first outing in Tailwind CSS and perhaps it will click for me in future...
Feedback very welcome! Pull requests to improve the integration also very welcome!
Hmmm - sorry about that. It looks like https://cdn.datatables.net/1.13.7/js/dataTables.tailwindcss.min.js doesn't exist, but https://cdn.datatables.net/1.13.6/js/dataTables.tailwindcss.min.js does.
I think it is just the min files missing the minified files - probably something to do with the build process. I'll look into that, but for the moment I've tweaked that page to use the non-min file.
Answers
+1 Would love to see a TailwindUI integration as well!
Edit: TailwindUI
What would it take on Patreon or something like that to get a tailwind package rolled out?
Kidding aside (well, kidding, but not kidding) we're moving into a tailwind application and have a pretty robust bs-4 based editor/datatable instance. I'd love to migrate it over to a tailwind instance, and re-up our editor sub.
Looks like we've boiled it down to a TailwindUI integration
.
I'll try a prototype of DataTables core with it next week and report back with how I get on.
Allan
Awesome! I'm not an expert in Tailwind (though I really enjoy it), but I'd be happy to take your prototype(s) for a test drive when appropriate.
I'm excited about a TailwindUI integration for DataTables, is there anything that can be helped with?
Does anyone know how to get in touch with the Tailwind UI people? I'm not clear on how the licensing would work if I were to do a DataTables integration. I dropped them an e-mail to their support address, but no reply yet. If anyone has a contact there, that would be really useful.
Allan
I've actually just heard back. They'd prefer not to have a Tailwind UI component integration with DataTables. That's fair enough - entirely their call.
Where does that leave a DataTables integration with Tailwind? We can still use Tailwind CSS, as it is open source (MIT license). It would just mean that components such as paging need to be recreated rather than using existing components.
That's perfectly do-able, but it will take additional time and effort. Still, there is obviously interest, so I will look to do a prototype integration with Tailwind CSS.
Allan
Hm, too bad! I wouldn't be opposed to paying for both the Editor and TailWindUI licenses to make that happen, but I guess they're probably not up for that either.
Thanks for all your work, Allan!
I think it's the best to integrate with Tailwind CSS, and leave options for us to change the classes used, so anyone can just integrate with any frameworks that use with Tailwind CSS easily.
Hi, it`s a wonderful news that an integration with TailwindCSS is on roadmap. I love Datatable and TailwindCSS.
Another vote for Tailwind CSS. I am wanting to move from Bootstrap 5 to Tailwind and having integration with Datatables is my last missing piece.
Very happy that TailwindUI rejected the integration. TailwindCSS is wonderful and it would be really really a shame to have its datatables integration locked behind paywalls. DaisyUI or vanilla seems the way to go so +1 from me as well.
Just wanted to add that Tailwind Elements also looks like a good alternative
another Plus one for vanilla TailwindCSS, this would allow us to add the utility classes we want to use instead of being locked into someone's judgement. I understand the complication since tw is a completly different utility class approach to css. Trying to make it flexible yet provide basic enough style to make dataTables function correctly could be a challenge.
Started doing some exploring and think this might be a simpler path to tailwind theme DataTables
https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
you could just build some "@apply" styles in your app css that apply whichever utility classes you want to default DataTables css classes for example
@jbradfield: does this not depend on the accessible/published theme classes of Datatables being granular enough to be able to implement the desired look and feel fully?
You're right this sounds simpler but given @allan never suggested it, I suspected the approach has limitations. Not holding brief though :-)
To me honest, it was more because I hadn't thought of that
. It does look like a perfectly valid approach, although I think I'd prefer a Tailwind integration that doesn't depend on the existing DataTables styles. I've not had a chance to dig into this yet, but it is moving steadily up my list 
Allan
I'm switching to tailwind css and I'm so very much hoping that it won't create any problems with our existing DataTables implementation. tailwind is a steep learning curve but so is css. I would hope that a tailwind option on DT doesn't add too much more to the complexity.
Yes, support that idea. Like say other: Atom CSS approach open new way for this plugin to be fully customizable. It can be used to recreate all other frameworks styles and new custom too. Last thinks to have it working
@allan
I would just make an integration for Tailwind because anything else that uses Tailwind (i.e. DaisyUI) will also work if the datatables integration is built just for Tailwind. I hope that makes sense what I am trying to say.
The issue is that Tailwind is a set of base utilities, not components. So for example DataTables needs a paging component. I could certainly create a paging component with Tailwind CSS, but it would be different from that created by Tailwind UI, or some other Tailwind component library. So the worry is that there would be no visual consistency.
Its probably the way that it needs to be done though, since I can't do Tailwind UI integration.
Allan
Hey @allan
We've talked a couple of times many years ago when I was submitting Bootstrap templates to https://datatables.net/manual/styling/themeforest - time flies!
I've been building Tailkit (UI component library) with Tailwind CSS the past 3 years. Having read this thread and having received questions multiple times about DataTables support, I thought that I should let you know that I can provide styles from Tailkit to save you time.
This way, you could build a base styling for Tailwind CSS support and afterwards someone using DataTable.ext.classes could override the classes to match his preference.
Feel free to get in touch if you are interested, so I can give you access to the styles that might be helpful for this integration.
You can preview some examples at (everything with dark mode support):
https://tailkit.com/preview/application-ui/components/pagination/
https://tailkit.com/preview/application-ui/components/tables/
https://tailkit.com/preview/application-ui/components/buttons/
Hope that helps!
Hi John,
Good to hear form you again! Thanks for your generous offer! I'll take you up on that please. I'm still concerned that using Tailkit will limit the appeal of a Tailwind CSS integration for DataTable to just the sub-set of Tailwind CSS users who happen to use Tailkit (e.g. everyone using Tailwind UI might not find it useful), but this might be a good way for me to get started in this direction.
Allan
You're very welcome Allan, kindly check your inbox as I have just sent you an email!
I believe this integration will be helpful because pagination/table/buttons (simple variation) design is subtle and would blend nicely with various designs (it should be a good starting point at least).
In my perspective, this theming option could be communicated as 'a boilerplate for Tailwind CSS.' Something along these lines: 'This is how you could use Tailwind CSS to style DataTables, so feel free to apply your designs in a similar way to make it perfect for your case.'.
Keep up the great work!
John
From what I was reading, I understand that people here want to see 3 integrations:
1. https://tailwind-elements.com/
2. https://flowbite.com/
3. https://tailkit.com/
Personally I was using Flowbite for some components so definitely +1 for that.
Also It would be great to have an instruction on how to do full customization with Tailwind CSS. From what I understand we need to take all the selectors from jquery.dataTables.css and use the apply directive to do the customization.
+1 For Tailwind Css instruction
Thanks for this great library.
To be honest, your post nicely highlights the problem with Tailwind CSS integration for DataTables- it isn't just an integration for Tailwind CSS itself, but it might require multiple integrations, each one diluting the number of people who would use it while increasing the maintenance required. Your list also didn't include plain Tailwind CSS, nor Tailwind UI (which per the discussion above, isn't an option unfortunately).
My current plan is to try an integration through Tailkit thanks to John's support. I might get a change to do that this week for DataTables core, but I'll need to see how it goes. From there we'll see how well that works alongside the other Tailwind CSS based UI components. I've got hopes that it will work well, although inevitably there will be styling differences.
Allan
Hi all,
With the help of Tailkit (thanks John!) I've created this tech preview of DataTables styled by Tailwind CSS.
You'll note on the page that only Tailwind CSS is loaded, not a component library that builds on top of Tailwind CSS. While this might mean that the integration doesn't perfectly align with the styles of your page, it does provide a framework that you could then customise further if you need.
If you want to try this out, you can do so with DataTables 1.13.5 core, and:
This is only for DataTables core - I haven't worked on any of the extensions yet. If you want to customise it, the key is the
DataTable.ext.classes.tailwindcssobject. I've used that and mapped to DataTables rather horrible property names (nor completely, but I'll progress that more). Moving forward, I think this is going to be the correct approach for theming, and I'll adopt it in a wider sense with v2.The integration isn't perfect yet - the processing panel I've just spotted needs to be updated for example, but I think its a decent start.
Moving forward - it seems to me that using Tailwind CSS is basically just inlining the styles in class names. That presents a little bit of a problem in some parts of the DataTables code, since not every element gets its own class name. In many cases I've expected the separation of style and behaviour and assumed a specific DOM structure. For example I often use the
>child selector rather than adding a specific class to an element if I know the structure is fixed. That doesn't seem to align with how Tailwind CSS operates, so there might need to be some changes to add class names to elements that don't need them for other styling integrations.There will also likely be some cases where I use CSS rather than Tailwind CSS classes - for example the sorting icons in the table at the moment. That might change over time and as my understanding of Tailwind CSS evolves. I haven't really "got it" yet - I haven't really seen the advantage of writing styles this way over using CSS, but this is my first outing in Tailwind CSS and perhaps it will click for me in future...
Feedback very welcome! Pull requests to improve the integration also very welcome!
Allan
@Alan: the Tailwind tech preview appears completely unstyled right now, is something missing?
Hmmm - sorry about that. It looks like
https://cdn.datatables.net/1.13.7/js/dataTables.tailwindcss.min.jsdoesn't exist, buthttps://cdn.datatables.net/1.13.6/js/dataTables.tailwindcss.min.jsdoes.I think it is just the min files missing the minified files - probably something to do with the build process. I'll look into that, but for the moment I've tweaked that page to use the non-min file.
Allan
Thanks. Is there any list of DT features/ integrations still yet to be implemented for Tailwind?