Using Tailwind's media query functionality within ReactJS

I have a situation where I have a div containing an image within it. I am attempting to use media queries from the Tailwind CSS framework.

<div className="flex">
    <img src="/assets/logo.png" className="h-20 md:w-2" alt="logo"/>
</div>

The md:w-2 class is supposed to apply to desktop screens, but on mobile devices (specifically Chrome on iPhone 12 Pro), the default width of h-20 is being applied instead. This is the opposite of what should be happening. I have checked for any screen overrides in my Tailwind CSS file, but there are none. I have also tried removing the img tag and testing it in different places, but the issue persists. How can I resolve this?

cssreactjstailwind-css

Answer №1

h-20 is used for setting the height, not the width. Perhaps you intended to use the w-20 class instead?

Referencing the official documentation:

By default, Tailwind follows a mobile-first approach for breakpoints, similar to frameworks like Bootstrap.

This means that utilities without prefixes (like uppercase) apply to all screen sizes, while prefixed utilities (such as md:uppercase) only take effect at and beyond the specified breakpoint.

To address your specific scenario, use:

<img src="/assets/logo.png" className="md:h-20 w-2" alt="logo"/>

This sets w-2 for mobile devices, with h-20 (or w-20) applying from md:h-20 (or md:w-20) onwards for desktop views (meeting the criteria of @media (min-width: 768px) in the default md breakpoint).

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

Background diagonally colored in second table cell

Is there a way to achieve a table cell with multiple background colors similar to the design shown in this image? https://i.sstatic.net/4n8EE.png The concept of having two different background colors in a table cell is close to what I am looking for, but ...

htmlcsslinear-gradients

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

javascriptcssjquery-uihtml2canvas

Utilizing React Hook Form for file uploads

Can someone assist me with uploading a PDF file using React Hook Form with next.js on the frontend and node.js on the backend? Frontend Code: const FileUpload = () => { const [proof, setProof] = useState({}) const onSubmit = async (values) =&g ...

reactjsfile-uploadaxiosnext.jsreact-hook-form

Switch the class of a div using jQuery when it is clicked

I need to implement functionality where 4 different links change the class of a specific div when clicked. For example, clicking on link 1 will change the class to s1, link 2 to s2, and so on. Below is some code that I have been working on, however, I am ...

jqueryhtmlcssclass

Issue with jQuery centering in IE browsers with jquery-ui-1.10.3.custom.js and jquery-ui-1.9.2.custom.js not working as expected

Are there any other alternatives you can recommend? Here is the dialog structure: <div id="dialogbox" title="message box"> <p>example content</P> </div> ...

javascriptjqueryhtmlcss

The function RenderItems is being referenced but is not defined within the return statement, causing

Hey everyone, I'm relatively new to ReactJS and I'm currently working on getting response data objects to display on a web app without users having to inspect the page or check the network/console for file upload error responses with the name &ap ...

javascriptdjangoreactjsdjango-rest-framework

Encountering this error for the first time - Uncaught Error displayed in the Console

I have been working on a ToDo list and it is almost complete. However, I have encountered an unfamiliar error in the console that is preventing me from creating the list. The error message reads as follows: OPTIONS http://localhost:4000/cpds/add net::E ...

javascriptnode.jsreactjs

Retrieving discount codes from Shopify

I'm currently working on developing a Shopify checkout extension that aims to retrieve available discount codes. However, I've encountered an error stating "Cannot read properties of undefined (reading 'codeDiscountNodes')." My approach ...

reactjsshopify-appremixshopify-storefront-api

Adjust the text input width appropriately for the cloze exercise

My JavaScript-generated fill-in-the-blank text is causing me trouble when it comes to adjusting the size of the input boxes. Unlike others, I know exactly what the user will or should be entering. If there is a blank space like this _______________, I wa ...

htmlcsstextbox

As a beginner in ReactJS and Material UI, I am eager to implement a drop-down menu feature in my navigation bar

I have a question about my code snippets: Currently, I am struggling to add a dropdown feature to the UI Elements and Tables on my navbar. Here are some links for reference: My current Output Ideal Output In LayoutMain.js, I have the following code sni ...

reactjsmaterial-ui

Sending a function along with event and additional arguments to a child component as a prop

I've managed to set up a navigation bar, but now I need to add more complexity to it. Specifically, I have certain links that should only be accessible to users with specific permissions. If a user without the necessary permissions tries to access the ...

javascriptreactjs

What is the best way to create a visual separation between these two arrows using styled-components?

Currently, I am immersing myself in styled-components and attempting to replicate the image provided below. Although I can achieve this with CSS, I am solely focusing on utilizing styled components for this task. <Container> {sliderItems.map((item) ...

javascriptreactjsstyled-components

Guide on how to navigate back to the login page when the access_token in local storage is not defined

Whenever my localStorage turns undefined, I need to redirect the user to the login page. However, this is not working as expected and I'm not sure what the issue is. Below is the code from my PrivateRoute.js: PrivateRoute.js import React from " ...

javascriptreactjslocal-storagereact-router-dom

The loading time for the NextJS production build is unacceptably sluggish

Recently, I started working with NextJS and deployed my project on Netlify as a production build. However, I've noticed that there is a significant delay of around 3-4 seconds when navigating to a specific page using the next router. Surprisingly, thi ...

javascriptreactjsnext.js

Using react native with a flex of 50% may lead to unexpected errors

Currently in the process of learning react native. Below is the code I am working with: <View> <View style={{flex:0.5,flexDirection="row"}}> <Image source={{uri:"http://image.com/image1.jpg"}} style={{width:100,height:'aut ...

cssreact-nativeflexboxreact-native-flexbox

`Invariable placement f`

Hey there, I'm still getting the hang of React Native and I have a question about fixing the position of these three colors. Every time I click on the search text input and the keyboard pops up, those three colors also move up along with it. I tried u ...

reactjsreact-native

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

htmlcsscss-selectors

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

cssnext.jsantd

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

javascriptcssreactjsfrontendbackend

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

javascriptjqueryhtmlcsscanvas