Set auto and fr grid template columns in Tailwind CSS?

Question

I need to apply this line of CSS to my layout:

grid-template-columns: auto 1fr;

Is this something you can't do with Tailwind CSS?

Answer 1

You can extend the utilities using your Tailwind CSS config:

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'my-columns': 'auto 1fr'
      }
    }
  }
};

<div class="grid grid-cols-my-columns">
  
</div>

Or you can use arbitrary values if you're only using this layout in one place:

<div class="grid grid-cols-[auto_1fr]">

</div>

There's more details in the documentation.