Integration of tailwind css

Integration of tailwind css

mrhumblemrhumble Posts: 1Questions: 1Answers: 0

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?

Answers

  • colincolin Posts: 14,208Questions: 1Answers: 2,408

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

    Colin

  • SchonhoffSchonhoff Posts: 6Questions: 0Answers: 0

    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. :smile:

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

  • NoxxEffNoxxEff Posts: 1Questions: 0Answers: 0

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

  • jim1506jim1506 Posts: 4Questions: 3Answers: 0
    edited September 2021

    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.

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

  • murrantmurrant Posts: 1Questions: 0Answers: 0

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

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

  • ayzayz Posts: 38Questions: 16Answers: 0

    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.

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

  • SchonhoffSchonhoff Posts: 6Questions: 0Answers: 0
    edited November 2021

    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.

  • ayzayz Posts: 38Questions: 16Answers: 0

    @Schonhoff has put it very succinctly: echo that!

  • ayzayz Posts: 38Questions: 16Answers: 0

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

  • szogyenyiszogyenyi Posts: 2Questions: 0Answers: 0

    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.

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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:

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

    Regards,
    Allan

  • szogyenyiszogyenyi Posts: 2Questions: 0Answers: 0

    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

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

  • karmendrakarmendra Posts: 14Questions: 5Answers: 0
    edited May 23

    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

  • allanallan Posts: 55,883Questions: 1Answers: 8,835 Site admin

    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

Sign In or Register to comment.