Sidebar widths and max widths missing

[jenstornell]

Often when I design something I need a sidebar. That probably goes for many of us. However, there are no suitable width and max width for that size.

Sidebars

Standard sidebar

A standard among sidebars seems to be to have them 300px wide. An example is stackoverflow.com (see the yellow sidebar to the right).

Map sidebar

A sidebar on map services like Google Maps and others uses a width around 400px. They have a bit more stuff to fill it up with.

I've not seen any other widths to 300px and 400px seems to be the best sidebar widths.

Available sizes

For Tailwind we have dynamic widths and we have w-64 which is 256px. It's a bit too short.

Suggestion

Add 300px and 400px to w- and max-w or sizes around those numbers. Many sites have sidebars and this would be a simple way to approach them.

For now

module.exports = {
  theme: {
    extend: {
      width: {
        "300px": "300px",
        "400px": "400px",
      },
      maxWidth: {
        "300px": "300px",
        "400px": "400px",
      },
    },
  },
};

(the names are not very pretty but it works for my project)