The div's style property now includes Tailwind Width set at 0px

Currently, I am developing a web application with Next.JS and Tailwind CSS for styling. In this project, I need to map over some "accords" related to perfumes and assign variable widths to each one based on the size property of the accord, which is a string. To achieve this, I am dynamically generating Tailwind classes for each div as follows:

className={`text-center w-${accord.size} rounded-r-2xl`}

In addition to assigning widths, I also have a style property that sets the background color based on the data associated with each accord:

style={{ backgroundColor: accordsData[accord.accord].color }}

The issue I'm facing is that when the code renders in the browser, it automatically adds width: 0px; to the style attribute, causing the width not to display correctly:

<div class="text-center w-100 rounded-r-2xl" style="background-color: rgb(204, 51, 0); width: 0px;">...</div>

I'm looking for a solution where my application does not append this extra style and instead utilizes the width specified in the Tailwind class. Your assistance on this matter would be greatly appreciated.

cssreactjsnext.jstailwind-css

Answer №1

Are you specifying width values that are part of Tailwind's default settings? Or have you defined a custom width in your tailwind.config.js file?

If not, and you're attempting to set a unique value, consider referencing Tailwind's documentation.

Unique Values If you require a specific width value that doesn't fit into your theme, you can use square brackets to dynamically generate a property with any arbitrary value.

<div class="w-[32rem]">
  <!-- ... -->
</div>

You would enclose your desired width within the [] like this:

<div class={`w-[${accord.size}]`}>
  <!-- ... -->
</div>

I hope this information proves helpful!

Answer №2

My mistake! I completely forgot to add that I am incorporating Framer Motion into my project. Through some debugging, I discovered that the width was being unintentionally set to 0 by Framer Motion.

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

Deployment on Vercel with Next.js does not execute the codegen command

Encountering a module not found error for imported generated types with codegen during Vercel build of my React Next.js project using Typescript and pnpm. On the development server, I manually generate types by running 'pnpm gen' command in the t ...

next.jsgraphqlvercel

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

javascripthtmlcssangularjs

Implementing CSS animations in ReactJS: A guide to activating onClick and onHover events

Is there a way to activate the onClick and onHover CSS animations for the ReactJS button component below? I attempted to use ref = {input => (this.inputElement = input)}, but I only see the animation when clicking the button. <td> ...

cssreactjsonclickhover

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

jquerycsstag-it

Step-by-step guide on dynamically generating table rows in React

I have been trying to dynamically create a table with rows and columns based on an array. While my rest request is functioning properly, I am facing challenges when attempting to switch from a hard-coded example to a dynamic approach using loops or mapping ...

javascriptreactjsmui-x-data-grid

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

javascriptphphtmlcss

Leveraging UseParams for Detailed Product Pages

I am in the process of developing a product detail page using the useParams Hook in my ReactJS application. Unfortunately, I have encountered some issues as I am able to retrieve the ID from the URL but unable to fetch the item's title, image, and pri ...

reactjsfirebase

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Currently, I am utilizing Prisma along with Next.js. My issue arises when attempting to retrieve content from Prisma within the getStaticProps function; while it successfully fetches the data, I encounter difficulties passing it on to the main component. e ...

javascriptnext.jsprismaserializable

Revamp the style of the date field in a Material UI dialog

I'm currently working on a React project where I am using Material-UI's date picker component to display date items. However, I find that the default style does not meet my requirements. I would like to use a selector for displaying dates in the ...

javascriptreactjsdatepickermaterial-ui

Upgrade Material UI from version 3.9.3 to the most recent release available

I recently attempted to update Material UI by following the guidelines outlined on their official website from version 3.9.3 to the most recent release. After running npm install @material-ui/core and npm install react@latest, I encountered an error upon ...

reactjsmaterial-ui

What is the method for altering the state of a single element within a map?

As I delve into learning React, I encountered a persistent issue that has been absorbing my time for several hours now. The problem revolves around mapping an array of product sizes to buttons and controlling the state change of only the last clicked butto ...

javascriptreactjsreact-hooks

Utilizing props to transfer data between components in ReactJS

I have a React application where I am binding text values when a specific div is clicked. However, I am now faced with the challenge of passing these text values to another component using props. This is what my code looks like: class PostOptionBar exten ...

javascriptreactjscomponents

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

I am encountering an export issue with using Cookies in my React application

Hey there! I'm new to using Cookies in my code and I encountered an error. Can anyone help me fix it? The error message I received is: "ERROR I FACE : Attempted import error: 'react-cookie' does not contain a default export (imported as &ap ...

reactjscookies

Strange problem with jquery/css animations when scrolling on the webpage

Here is the link to my page: The problem I am facing is that when the page initially loads, the animations do not work on most elements like the button below the video. However, when I scroll back up, the animations start working and then when I scroll do ...

jqueryhtmlcssjquery-animate

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

javascriptcssswiper.js

Alignment vertically in a Razor view

Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...

htmlcssrazor

Dimension of images within bootstrap column division

I have a layout with three columns using col-md-4 for a thumbnail design, and then I have another page with col-md-8. In both cases, I need to display an image. Should I use the same image for both layouts or would it be best to have two separate images, e ...

htmlcsstwitter-bootstrap

Troubleshooting font problems in Windows for customer support

https://i.sstatic.net/xh1Qb.png ...

cssfonts