TailwindCSS: finding the computed style

[ttsoares]

Total newbie here. Learning Cypress about two weeks.

HTML:

`<div
cy-test="creations_grid" className="w-full grid grid-cols-1 md:grid-cols-4 gap-4 "

`

When the Window is small size (sm) this div renders just one column.

Devtools shows like this:

grid-template-columns: 422px; Best Match .grid-cols-1 repeat(1, minmax(0px, 1fr))

(422px is an arbitrary value)

This did not work:
cy.get('[cy-test="creations_grid"]').should( "have.css", "grid-template-columns", "repeat(1, minmax(0, 1fr))" );

How teach Cypress to test if the grid has really just one collumn ?

[ttsoares]

This is the solution:

cy.get('[IDENTIFYER]')
.children()
.last()
.then(($div) => {
const style = window.getComputedStyle($div[0]);
const columnCount = style.gridTemplateColumns.split(" ").length;
expect(columnCount).to.eq(1); // Expecting 1 column
});

[ttsoares]

Help from Discord channel...