'TailwindCSS grid and grid-cols not working properly

I've been using TailwindCSS throughout a NextJS project without any issues at all until I decided to implement a table component. In this table component I was planning on using the divide-y class from tailwind, however, given that for the class to work, the component has to also have the grid and grid-col-n class. Now I've done that, created a div with both the grid grid-cols-1.

The problem is the following: grid seems to work fine, when I inspect using the web inspector I can see the div having a display: grid but the fractions are now working properly as the grid-cols-1 should translate to a grid-template-columns: repeat(1, minmax(0, 1fr)), but the inspector shows grid-template-colums:1fr 2fr

Code web inspector



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source