Decrease the line height using Tailwind CSS

When incorporating Tailwind CSS into my code, I notice a change in spacing:

<ul class='list-inside list-disc px-0.5'>
    <li>👍 <span class='italic font-semibold'>Billpay</span></li>
    <li>👍 <span class='italic font-semibold'>Check</span></li>
    <li>👍 <span class='italic font-semibold'>EFT</span></li>
    </ul>

text-xl:

<ul class='list-inside list-disc px-0.5'>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>Billpay</span></li>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>Check</span></li>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>EFT</span></li>
    </ul>

The original spacing is changing as illustrated by these images:

https://i.sstatic.net/7pXnP.jpg

https://i.sstatic.net/cmJw2.jpg

How can I maintain the initial spacing?

csstailwind-css

Answer №1

In its default settings, Tailwind assigns a unique line height to each text size (refer to: https://tailwindcss.com/docs/font-size). For regular text, the line height is 1.5rem, while for text-xl it increases to 1.75rem. To adjust the spacing between lines, consider using utility classes like text-xl leading-normal (or even text-xl leading-snug, if a narrower gap is preferred).

Answer №2

Ensure to specify the line height for each breakpoint when adjusting font size across multiple breakpoints.

<h1 className="text-4xl md:text-6xl font-semibold md:min-w-[446px] leading-[80px] md:leading-[80px]">
    Enhance Your Trading Experience with Accuracy and Speed
</h1>

This particular code snippet is optimized for devices larger than mobile:

<h1 className="text-4xl md:text-6xl font-semibold md:min-w-[446px] leading-[80px]">
    Enhance Your Trading Experience with Accuracy and Speed
</h1>

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

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

javascripthtmlcssscroll

The header is visible above the navigation bar when scrolling on mobile, but it should be hidden

I am facing an issue with fixed content on mobile positioned above a Bootstrap navbar. The problem arises when scrolling down, causing the navbar to move up by 50px (the height of the content above the navbar). Everything seems to work fine initially, but ...

jqueryhtmlcss

How can I align text in the center of a page and on the same line as a list?

Take a look at my website: I've been struggling to center the text on the screen with the social icons floating to the right. Here's the code I have: Code - <div class='social_icons'> <span class="social_ ...

htmlcsscenteralignment

Unable to set maximum width for images in Firefox browser

Welcome to my page where I am utilizing the latest version of Bootstrap v3.2.0 I have encountered an issue when using the display: table-cell; CSS property within a div block. Specifically, the max-width: 100%; CSS property does not function as expected f ...

htmlcsstwitter-bootstrap-3

The offsets for selecting text are not accurate when multiple values share the same text

I am faced with a text that goes like this -> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type ...

javascripthtmlcssangularjs

What is the best way to set the background image in reveal.js?

Is it possible to place a background image on the right side of a specific slide in a reveal.js presentation? This is how I attempted to add the image: <section data-background="myImage.jpg"> // content </section> What CSS styles can be ad ...

cssbackground-imagereveal.js

Is it possible to determine the height of a div that has been assigned `overflow-y: auto`?

Is it possible to determine the height of a div element with its content without using overflow-y: auto? I would like to keep overflow-y: auto applied but still be able to calculate the height of the div as if the overflow property was not there. Specifi ...

cssreactjs

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

jquerycsshoverfade

Creating a Popup with JS, JQuery, CSS, and HTML

Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance! ...

javascriptjqueryhtmlcsspopup

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code: .my-5 { margin:100px; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: a ...

htmlcss

Is there a way to enclose a set of elements that are aligned to the

I am facing an issue with a container div that contains multiple items. The container requires a border, but the problem arises when I float the elements left within the container, as it seems to disrupt the flow of the elements. Adding a border to the co ...

css

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

Exclusive workshop on concealing H1 header in Jumbotron

Trying to make a Jumbotron's height 100% of the user's browser window with a special class, but running into issues on mobile devices as a div within the jumbotron is covering up the headline. Any suggestions for a fix? Live link: HTML <di ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Set Blueprint container with a full-width background that fills the entire browser window

I'm currently utilizing the Compass framework in conjunction with the Blueprint framework. Within my setup, I've configured a 24 column layout with a total width of 1000px declared in my base.scss file. The HTML structure appears as follows: & ...

csscompass-sassblueprint-css

Building a tag cloud with only HTML5 and CSS3

I am looking to generate a word cloud similar to the one shown in this image : click here for reference Is there a way to create a tag cloud without relying on JavaScript? Using only HTML5 and CSS3. Appreciate any guidance. Does anyone have a solution fo ...

htmlcsstagscloud

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

htmlcsssticky

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

javascriptcsstwitter-bootstrapreactjsweb

Steps to automatically switch Keyboard layout in APEX 5

My application is developed in APEX 5.1.2 and I'm struggling with inserting fields in RTL layout. It's cumbersome having to manually change the keyboard layout every time I work on these fields. Is there a way to have a field automatically switch ...

cssoracle-apex

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

javascripthtmlcsshovertailwind-css

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss