A plugin for Tailwind that provides utilities to create grids according to the RAM pattern (https://towardsdev.com/ram-css-layout-pattern-38d2a9c090fc)
Install the plugin via npm
npm i -D @marica.io/tailwind-ram
Then add the plugin to your Tailwind config
// tailwind.config.js
module.exports = {
content: [
// ...
],
theme: {
// ...
},
plugins: [
//...,
require("@marica.io/tailwind-ram"),
],
};
You can use the new ram-
class to style any grid element. This will ensure that grid items are at least 250px wide but
they will keep growing with the container:
<div className="ram-[250px] grid w-full">{/* items */}</div>
The default is auto-fit
, if you want to use auto-fill
then you can use ram-fill
instead:
<div className="ram-fill-[250px] grid w-full">{/* items */}</div>
This would potentially create a blank space when the container is wide enough to hold more items than you actually have.