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: 13,196Questions: 0Answers: 2,255

    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,056Questions: 1Answers: 8,639 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,056Questions: 1Answers: 8,639 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,056Questions: 1Answers: 8,639 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,056Questions: 1Answers: 8,639 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?

Sign In or Register to comment.