[container] Get ride of the extra added XS breakpoint.

[damsfx]

Is there a way to completely remove the extra screen definition added for XS ?
This breakpoints break default Tailwind CSS container fluid width.

An example for screen width of 432px :

Default	Tailwind Elements

The only way I have found so far is to use :

@layer utilities {
    .container {
        @media screen and (max-width: 640px) {
            @apply max-w-none;
        }
    }
}

Tailwind Elements config

The Tailwind docs said :

Adding smaller breakpoints
If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system.

This is not the case in Tailwind Elements.

const plugin = require("tailwindcss/plugin");

module.exports = plugin(() => {}, {
  theme: {
    extend: {
      screens: {
        xs: "320px",
      },
      ...
    }
  }
}

It would be better for Tailwind Elements to respect this rule to avoid side effects.

const plugin = require("tailwindcss/plugin");
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = plugin(() => { }, {
  theme: {
    screens: {
      'xs': '320px',
      ...defaultTheme.screens,
    },
    extend: {
      // screens: {
      //   xs: "320px",
      // },
      ...
    }
  }
}

[juujisai]

I think something like this could work, but if any component is using the "xs" breakpoint, the styling could break

const plugin = require("tw-elements/dist/plugin.cjs");
plugin.config.theme.extend.screens = {};

/** @type {import('tailwindcss').Config} */
module.exports = {
 ...
  plugins: [plugin],
 ...
};

---

As of the xs beeing inside the extend object, moving it outside didn't change anything for me. I have added a new issue to our project list to check this more in detail.

Best Regards!

[damsfx]

As of the xs beeing inside the extend object, moving it outside didn't change anything for me.

By redefining the breakpoints, including the new one (xs) and all the other breakpoints already defined, we retain the order: xs > sm > md > lg > xl > 2xl
By using extend, you lose mobile first order, the new breakpoint is added after default ones: sm > md > lg > xl > 2xl > xs.

Meanwhile, thank you for your time and your answer.