Integration of tailwind css - Page 2

Integration of tailwind css

2

Answers

  • rw152rw152 Posts: 56Questions: 15Answers: 1
    edited December 2022

    +1 Would love to see a TailwindUI integration as well!

    Edit: TailwindUI

  • rw152rw152 Posts: 56Questions: 15Answers: 1

    What would it take on Patreon or something like that to get a tailwind package rolled out? :D

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • rw152rw152 Posts: 56Questions: 15Answers: 1

    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.

  • scsbreesescsbreese Posts: 8Questions: 2Answers: 0

    I'm excited about a TailwindUI integration for DataTables, is there anything that can be helped with?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • rw152rw152 Posts: 56Questions: 15Answers: 1

    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!

  • DarthSouzaDarthSouza Posts: 1Questions: 0Answers: 0

    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.

  • henryavilahenryavila Posts: 1Questions: 0Answers: 0

    Hi, it`s a wonderful news that an integration with TailwindCSS is on roadmap. I love Datatable and TailwindCSS.

  • BWBama85BWBama85 Posts: 1Questions: 0Answers: 0

    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.

  • m33ts4k0zm33ts4k0z Posts: 2Questions: 0Answers: 0

    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.

  • m33ts4k0zm33ts4k0z Posts: 2Questions: 0Answers: 0

    Just wanted to add that Tailwind Elements also looks like a good alternative

  • jbradfieldjbradfield Posts: 3Questions: 0Answers: 0

    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.

  • jbradfieldjbradfield Posts: 3Questions: 0Answers: 0

    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

    .dataTables_wrapper  {
        @apply  bg-red-500 p-5 text-gray-200 ; /* append existing styles */ 
        margin-top: 4rem; /* add some other custom stuff too*/
    }
    

  • ayzayz Posts: 58Questions: 20Answers: 1

    @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 :-)

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • chuckgchuckg Posts: 18Questions: 7Answers: 0

    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.

  • TriloworldTriloworld Posts: 1Questions: 0Answers: 0

    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

  • nickyoungnickyoung Posts: 1Questions: 0Answers: 0

    @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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • john_pixelcavejohn_pixelcave Posts: 2Questions: 0Answers: 0

    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!

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • john_pixelcavejohn_pixelcave Posts: 2Questions: 0Answers: 0

    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

  • sandulucasanduluca Posts: 1Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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.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!

    Allan

  • ayzayz Posts: 58Questions: 20Answers: 1

    @Alan: the Tailwind tech preview appears completely unstyled right now, is something missing?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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.

    Allan

  • ayzayz Posts: 58Questions: 20Answers: 1

    Thanks. Is there any list of DT features/ integrations still yet to be implemented for Tailwind?

Sign In or Register to comment.