[Tailwind UI]: Mixing Sidebar and Non-Sidebar Pages in a Single App

[davecardwell]

Regarding configuring breakpoints if you’re using a sidebar application shell, the documentation states:

The easiest way to do this is using the layout option exposed by our @tailwindcss/ui plugin

However, doing so globally breaks the other layouts. In my case I have a single application with a logged out area using marketing templates like the hero sections, and a logged in area in which I would like to use a sidebar application shell.

I believe this is a common pattern, and it would be a burden to have to maintain and deploy two separate applications if supporting this styling difference was the only reason.

I would like to see a method for supporting both layout types in a single application.

[scotteknight]

I've been a bit perplexed using the layout: 'sidebar' option. Looking at the source it rewrites the break points as:

screens: {
                sm: '640px',
                md: '1024px', // 768 + 256
                lg: '1280px', // 1024 + 256
                xl: '1536px', // 1280 + 256
              },

This essentially removes the original 'md' breakpoint making small and medium screens the same. But to me it seems like the implementation should be to remove the 'lg' breakpoint so that medium and large screens are the same. (i.e. the largest screen without a sidebar should be the same as the smallest screen with a sidebar)

I could just be confusing myself but maybe the answer is to just not use the layout: 'sidebar' option which would also solve the issue here as well.