Have a Taiga css-less

[qortex]

I love Taiga philosophy of elegant customization and built-in support for useful UI elements such as dropdown, tooltips & co.

However, my project uses Tailwind CSS for all the CSS customization. And I find it hard to use Taiga alongside.

I would love to have the Taiga features but without css, that I could customize on my own.

As of now, I need to import the two less files:

"node_modules/@taiga-ui/core/styles/taiga-ui-global.less",
"node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",

even though I don't plan on using Taiga design system.

It pollutes the CSS with general properties that do not apply to me (it seems to include normalize.less, which in turns pollutes h1 styles & such).

I would love to be able to use the Taiga facilities without any CSS, and provide them as I go. For example, by specifying class names for css, that would allow me to use Tailwind.

As an example, as a workaround to use Taiga dropdown with my own CSS, here is what I do:

I don't import the two less files above.
I patch CSS classes by hand at a global scope with:

tui-dropdown-box {
  @apply rounded-md #{!important};

  div.wrapper {
    @apply bg-white rounded-md shadow;
  }
}

However, I suspect I will run into a lot of troubles if I try to use any other control in the library.

Long story short, making CSS more "opt-in" than "include everything" would be awesome.

Is it a big refactor? Or maybe it's already possible and I don't know how?

[waterplea]

We plan to make global styles optional. As for the theme file, it is going to be required. But you can, of course, make your own theme. There are not much styles there, mostly CSS variables and styles for wrapper appearances.

[qortex]

Alright, so just to make sure I got you, removing global styles will stop overwriting usual css (such as h1 & such) ?

[waterplea]

Yes, but at the moment I'm not sure it won't break anything )

[waterplea]

Currently as of 2.50.0+ global styles should definitely be optional. If you notice any issues without them — please file an issue.