Question 118769 in CSS Question posted in
Some basic documentation can be found here.

How to convert the following css line in Tailwind class names?

The line looks like this: grid-template-rows: auto 1fr;

When searching all of the docs and also when using css to tailwind converted I could not find the solution.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    To achieve the same result without extending Tailwind CSS like mentioned here

    We have to move from defining grid size explicitly like so grid grid-template-rows: auto 1fr; and instead defined like this grid-auto-rows: auto 1fr;

    In order to achieve that using Tailwind you have to use the following class name on the parent:

    auto-rows-[auto_1fr]

  2. 0

    Can you try grid grid-rows-auto-1fr?

    Login or Signup to reply.
  3. 0

    Can you try something like grid grid-flow-row auto-rows-[1fr]

    The documentation gives a example with this code for arbitary values grid grid-flow-row auto-rows-[minmax(0,_2fr)]

    You can also try to custom a theme in tailwind.config.js.
    Here is an example on how its done:

    module.exports = {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      }
    }
  }
}

    You can also try: auto-rows-max-[1fr]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search