[Vuejs]-Using Nuxt and TailwindCSS how to make full height

by

1👍

As you already said in your question, you’d have to apply the classes to every parent element, including the wrapper div for the Nuxt app. I don’t know if there is something like a hook to access this element, but what I’d do in your situation is simply adding this to my CSS somewhere:

#__nuxt {
  @apply h-full;
}

In case you didn’t know, the @apply directive is tailwind’s way of using their classes inside CSS.

Edit: The wrapper element has an ID, not a class.

👤muell

0👍

h-full and m-h-full refer to the height of the parent.
you probably have to add m-h-full to all ancestor elements up to <html>

The specs say:

The percentage is calculated with respect to the height of the
generated box’s containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to auto. A percentage height on the root element is relative
to the initial containing block.

also consider viewport height, sometimes it is a better fit.

👤YAMM

Leave a comment