Having issues with min-height in Tailwind CSS

Despite using the tailwind class min-h-screen, the height of the element remains unchanged and is not even displayed in the dev tools. However, when I directly set the height using the style property like style="height: 100vh;", it effectively alters the height of the element.

<div class="bg-white flex-1 p-6 flex flex-col w-3/4 xl:w-full 
z-10 min-h-screen" style="box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.3);">
    content
</div>

The height is not specified anywhere else except there.

Although I tried editing the config file with minHeight: {'m100v': '100vh'}, I believe the standard method should suffice.

csstailwind-css

Answer №1

It seems like you have set custom values for minHeight in your tailwind configuration. Even if these values are different from the defaults, the default ones will be disregarded.

If you wish to include custom values, you must extend your theme object as shown below

module.exports = {

   theme: {
      extend: {
       minHeight: {
           'custom': '234',
           }
      },
   }
}

Make sure to keep the default values unchanged.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Links that have dropdown menus are not visible on the webpage, whereas links without dropdown menus are still functional

For some reason, the links that have dropdown menus no longer display the dropdown when you hover over them. The links without dropdowns are working fine. This issue is occurring on this website, specifically on the green navbar. I am unsure of what coul ...

javascripthtmlcssdropdown

How to vertically center a card between a search bar and the bottom of the viewport using Bootstrap?

I'm struggling to center a card vertically between the search bar and the bottom of the viewport. Even after setting the body height to 100%, the content extends beyond the viewport, leaving white space that users can scroll into. I've attempted ...

htmlcsstwitter-bootstrapbootstrap-4

When I select a checkbox, the mark should not appear as selected, and conversely

I've been working on styling a checkbox with some code. However, the checkbox mark is not hidden by default. I would like the mark to be hidden initially and only shown when selected. Can someone please help me solve this issue? Thank you in advance. ...

htmlcss

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Accordion menu side icon modifications when expanding

This is a menu with a collapsing feature. I would like to change the right side icon when expanding the menu. In order to achieve this, I need to add <i class="fa fa-caret-down pull-right"></i> in place of the current fa-caret-down icon and sw ...

jqueryhtmlcsstwitter-bootstrap-3

JavaScript stylesheet library

What is the top choice for an open-source JavaScript CSS framework to use? ...

javascriptcssframeworks

Identify the initial child assigned with a specified class using CSS

Here is a snippet of HTML code: <ul> <li class="class1">AFFECTED</li> <li class="class1 class2">NOT</li> <li class="class1">NOT</li> </ul> <ul> <li class="class1 class2">NOT</ ...

htmlcsscss-selectors

The ul media queries have malfunctioned

In the .gallery section, there are 12 li elements that contain images. Originally, I used media queries to adjust the number of columns in the grid to 6, 4, 3, and 2 based on the browser width. However, when I tried to create a size ratio of 2:1 for all ...

htmlcss

What is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

javascripthtmlcssreactjs

Is the menu item a little crooked?

Working on designing a menu, and I noticed that the 'Book Now' option is slightly misaligned (pushed down) after adding a border. This seems to disrupt the horizontal alignment. Is there a way to correct this issue? Check out my Codepen Here is ...

htmlcss

Dynamic Video Player

Trying to embed a YouTube video on your webpage? Most sources suggest using the following code: HTML <div class="video-container"><iframe.......></iframe></div> CSS .video-container { position:relative; padding ...

htmlcssyoutube

Creating custom themes in React Native using dynamically loaded JSON data

Is it possible in React Native to override custom styles with dynamically fetched font-size and background color values from a server's JSON data? I am looking to incorporate this JSON data theme into my style themes. Can you provide the syntax for cr ...

cssajaxreactjsreact-nativereact-redux

How to overlay text on top of an image in HTML without using the image as a background

Here is the code snippet I am currently working with: <img src="../../1021.png" alt class="img img-fluid"> </div> I am looking to add text and an input field over this image without setting it as a background due to certain reasons. Is ...

htmlcssbootstrap-4

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

htmlcssbuttoninputpadding

Incorporate periods after text with CSS

After creating an ASP page to showcase events, I decided to limit the content displayed in each item template to three lines using CSS. Now, I am looking to add three periods after the text to signify that there is more content available. I tried using . ...

htmlasp.netcsscss-selectors

CSS can be used to overlay a portion of an image when resizing

Looking to add some animation to a sprite image on hover - specifically, sliding up or down to reveal another hidden part (colored sprite). The CSS code below works well for pixels, but I also need it to be responsive so that it resizes when the browser wi ...

javascriptjquerycssimage

What is the best way to define a recursive object type in TypeScript specifically for managing CSS styles?

I have implemented React.CSSProperties to generate css variables, allowing me to define styles like let css: React.CSSProperties = { position: "relative", display: "inline-block", background: "red" } My goal is to build a theme with css variables ...

cssreactjstypescriptrecursion

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

Having trouble with making the jQuery animate toggle function properly executed

I am trying to create a panel that is positioned behind the header of my website, with a tab that sticks out below the header. When this tab is clicked, I want the panel to slide down from behind the header, and when clicked again, I want it to slide back ...

javascriptjqueryhtmlcss

Trouble with using the "dl" (definition list) element in Bootstrap 4

Issue with dl list view in Bootstrap 4 compared to Bootstrap 3 HTML code example: <section class="landing"> <div class="container"> <dl class="dl-horizontal"> <dt>column1</dt> <dd>co ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4