Option to set prefix config for tailwind in order to allow side-by-side use with bootstrap

[simontaurus]

Question

Althought twitters bootstrap is not known to be the best css framework it's still very popular and there are many existing components based on it and at least for prototyping it would be great to use them with nicegui.
Unfortunately, with nicegui using tailwind instead, using bootstrap based components is not possible without applying a prefix to the tailwind config.
(see https://stackoverflow.com/questions/62688037/can-use-both-tailwind-css-and-bootstrap-4-at-the-same-time)

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Would it feasable without mayor changes to allow such an optional config adaption?

[simontaurus]

Update: Apparently it is easier to scope bootstrap.css within the component definition:

Option 1:

<style lang="scss" scoped>
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
</style>

Option 2:

<template>
  <div class="bootstrap-wrapper"></div>
</template>
<style lang="less">
.bootstrap-wrapper {
  @import (less) url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
}
</style>

However, it seems like imports in vue style section are not working at all (see #4177).
Option 2 also fails to due lacking support of import variants in lesscpy, see lesscpy/lesscpy#71

Compiling the vue component with vite and manually including the generated stylesheet in nicegui as follows works as expected:

css_name = "bootstrap_scoped.css"
app.add_static_file(local_file="./vue/dist/style.css", url_path="/" + css_name)
ui.add_head_html(
    rf'<link rel="stylesheet" href="/{css_name}">',
    shared=True,
)