Adding new tailwind breakpoints in NiceGUI

[afusdev]

Question

I would like to add a new breakpoint prefix as xs wich is done in the theme.screens section of  tailwind.config.js file like this:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

Im just wondering how to adjust that whilst using NiceGUI, cant seem to find the tailwind.config.js file. In advance, thanks! :)

[falkoschindler]

Hi @afusdev,

You can extend Tailwind's breakpoints with some custom JavaScript like this:

ui.add_body_html('''
    <script>
        tailwind.config.theme = {
            extend: {
                screens: {
                    xs: '475px',
                },
            },
        };
    </script>
''')

[afusdev]

Thanks! Im guessing this can be used to customize other tailwind properties aswell?

[falkoschindler]

Yes, I think so. But I haven't experimented much with this configuration yet.

[afusdev]

Ill give it a try, thanks again for the quick answer!