Avatar of the person chatting

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 grid
  • grid-cols-auto-fit: creates grid columns that fit to the container with a minimum size of 240px
  • grid-flow-row: specifies the direction of the grid to be from left to right and then top to bottom
  • gap-4: sets the gap between grid items to 1rem
  • px-5: sets left and right padding to 25px
  • mb-10: sets bottom margin to 40px