Tailwind CSS support

[leodip]

I love the library, I must say.

I hope one day it supports Tailwind CSS. Most modern applications are being written with Tailwind today...

Thanks!

[Mstanic05]

Can you assign this to me!

[olifolkerd]

@Mstanic05 hey absolutely, if you want to do a PR with a new theme then please do, I would love that!

Oli :)

[FaBay89]

Tailwind needs a build process where it scans your (html) files, so you can not just add the class names, because Tailwind will not recognize them. There is a better way to use Tailwind with third-party components like Tabulator: component classes

Example from my project:

/* File: app.css */
@import  "tabulator-tables/dist/css/tabulator_simple.min.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/*@layer components {  /* --- do not use layer if you want to force inclusion   */

  .tabulator {

        .tabulator-headers, .tabulator-row {
            @apply flex border-b border-dotted border-neutral-400;
        }

        .tabulator-cell[tabulator-field='field1'], .tabulator-col[tabulator-field='field1'] {
            @apply border-r border-neutral-300 mr-4;
        }

        .tabulator-cell[tabulator-field='field2'], .tabulator-cell[tabulator-field='field3'] {
            @apply bg-neutral-100;
        }

   }
  /* ... */
/*}*/

This way you can edit the complete table with tailwind according to your needs.

(There is one improvement you could do for tailwind users: i needed an unstyled base theme, so i removed all background, color, border and font styles from your tabulator.scss. Then i could start styling from scratch with tailwind. But the component classes also works with pre-styled versions. Regex for lines i removed: ^([^$\n].*(background|color|border|font)(?!-box).*)$)

Update: Leave out the @layer components line, to make sure the css code will be included. (https://tailwindcss.com/docs/adding-custom-styles#removing-unused-custom-css)

[olifolkerd]

@FaBay89

What would be your recommendation for Tabulator then? is there something i could add to the docs to make this clearer to users?

Cheers

Oli :)