Here is what I have:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">

I am trying to make a grid have 2 columns at small, 3 columns at medium, 4 columns at large & xl, and 5 columns at 2xl.

All of these breakpoints function up until 2xl. The 2xl breakpoint is the standard 1536px as defined by tailwind.

In the inspection window, the "2xl:grid-cols-5" style never shows up, but the "lg:grid-cols-4" style persists.

I tested the 2xl breakpoint for text color & text size and it worked fine, however it will not work for the grid columns or for something like "2xl:w-1/6".

I tried creating a custom breakpoint in the tailwind config file under theme -> extend -> screens, but these custom breakpoints are not working for the grid either, only things like text color & size.

The grid will go to 5 columns if I do "xl:grid-cols-5" so its not an issue of space.

My monitor is a 4k monitor with a resolution of 3840 x 2160, well past the 2xl breakpoint.

Any help is greatly appreciated.