Calendar weekly view col-start does not work properly

[falti]

What component (if applicable)

• URL for category: https://tailwindui.com/components/application-ui/data-display/calendars#component-89f285aeebb60ddecb7ec8b5e664d525
• Component name: Calendar

Describe the bug Selecting the column for a calendar entry is buggy. Using sm:col-start-<column-number> only works for some columns. Removing the sm: seem to work but fails to display the entry on a smaller browser window.

To Reproduce Steps to reproduce the behavior:

1. Go to the URL of the calendar (weekly view)
2. Open the inspect (e.g. F12 on Chrome)
3. Make sure your browser window is at least md sized
4. Find the second <li/> element in the dev tools (Flight to Paris) and change the class to sm:col-start-4
5. The event will be shown in the first column (Monday) instead of the 4th (Thursday)

Expected behavior Calendar entries should show up in the correct column

• Monday -> sm:col-start-1
• Tuesday -> sm:col-start-2
• ...

Screenshots If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

• OS: macOS Monterey
• Browser Brave (Chromium) (Offizieller Build) (arm64)
• Version 1.46.144 Chromium: 108.0.5359.128

Also tested in Safari - same issue here.

[adamwathan]

Hey! I think what you're seeing here is that editing the class in dev tools doesn't work because that class doesn't exist in the compiled stylesheet. The stylesheet being used for the iframe previews on the Tailwind UI website only contains the classes we've actually used, and sm:col-start-4 isn't used in any of the templates so the class doesn't exist. You'll notice by contrast that sm:col-start-2 and sm:col-start-6 do work because they happen to be used in other components and therefore do exist in the stylesheet.

Tailwind generates the necessary CSS from your source files, so if you actually make this change in your actual project and recompile the CSS it works as expected:

Hope that is helpful!

[falti]

I tried the same in my component (using Elixir Phoenix LiveView) but I get the same problems there. Omitting sm: makes the view work but fails when resizing the window to below sm.

Edit:

I think I know what the issue is. I tried to generate the sm:col-start-#{number} dynamically from the LiveView which is server-side code. This is not recognized by Tailwind as the classes do not appear in any static views and hence, they don't exist at all. I think I can cheat a bit and render some hidden elements to make sure the classes will exist so I can use them from within my LiveView component. I am sure there's a better way to do this but it will work for now.

Thanks, your explanation nudged me into the right direction!

[adamwathan]

Hey! I'm not totally sure what you mean when you say "fails when resizing the window to below sm", but on small screens our example just shows the events for Wednesday, so if you have an event showing on Thursday you'll want to add the necessary classes to hide that event on small screens like we do for the other events in the example that don't appear on Wednesday..

For questions about customizing the examples in Tailwind UI your best bet is to join the Tailwind UI Discord server — we definitely want to hear about and fix bugs in the product but unfortunately we can't offer one-on-one technical consulting for questions around customizing the templates to anyone's specific needs.

[ttntm]

I tried the same in my component (using Elixir Phoenix LiveView) but I get the same problems there. Omitting sm: makes the view work but fails when resizing the window to below sm.

Edit:

I think I know what the issue is. I tried to generate the sm:col-start-#{number} dynamically from the LiveView which is server-side code. This is not recognized by Tailwind as the classes do not appear in any static views and hence, they don't exist at all. I think I can cheat a bit and render some hidden elements to make sure the classes will exist so I can use them from within my LiveView component. I am sure there's a better way to do this but it will work for now.

Thanks, your explanation nudged me into the right direction!

Thanks for that, just saved me quite a bit of a time and headache.

I'm working on an Astro site and I ended up putting the SSR computed sm:col-start-${col} classes I need to work into a comment. Works for me.

[garethdown44]

This is not recognized by Tailwind as the classes do not appear in any static views and hence, they don't exist at all.

Thanks very much - had the same with SvelteKit.

I was tearing my hair out and I don't think I would ever have solved this!