Convert this to tailwind and get rid of the style tag <div className="books"> {books.map(book => { return <Book key={book.URL} {...book} />; })} <style jsx>{` .books { padding: 0 25px; margin: 0 0 40px; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } `}</style> </div>
Here's the tailwind CSS version of the code:
scss<div className="books grid grid-cols-auto-fit grid-flow-row gap-4 px-5 mb-10">
{books.map((book) => (
<Book key={book.URL} {...book} />
))}
</div>
The Tailwind CSS classes used are:
grid
: sets the display property to gridgrid-cols-auto-fit
: creates grid columns that fit to the container with a minimum size of 240pxgrid-flow-row
: specifies the direction of the grid to be from left to right and then top to bottomgap-4
: sets the gap between grid items to 1rempx-5
: sets left and right padding to 25pxmb-10
: sets bottom margin to 40px