Leveraging the power of CSS calc() in combination with TailwindCSS styles and JavaScript

Can you explain why applying styles with TailwindCSS v3 to calculations using JS variables does not work?

I'm working on a project using VueJS, and I've noticed that styling works fine when using calc as a string like this:

...
<div class="w-[calc((100%-12rem)*2/3)]">
...

However, it doesn't work when JS variables are involved, like in the following example:

...
<div :class="`w-[calc(${props.languages.length * 1.25 + 3}rem)]`">
...

Even though the console shows the correct HTML class being generated:

...
<div class="flex w-[calc(14.25rem)]"
...

... the styles are still not applied. Any suggestions? What am I missing here? It seems like a useful feature for dynamic styling based on data, but I just can't get it to work despite being so close.

Appreciate any help or insights.

cssvue.jstailwind-csstailwind-uitailwind-in-js

Answer №1

After some digging, I pinpointed the root cause: Tailwind's JIT, which is active and operational by default in TailwindCSS version 3.

This is where it gets interesting: they advise against generating class names dynamically, a practice I happened to be experimenting with.

I heeded their advice (reference this helpful v2 documentationlink) and made a workaround to avoid using Tailwind directly this time, instead opting for inline styles to define the width of my element like so:

<div :style="`width: ${props.languages.length * 1.25 + 3}rem;`">

Appreciate the help anyway ;)

Answer №2

Here is an alternative method:

<script src="https://cdn.tailwindcss.com"></script>

<div id="element" class="w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300"></div>

<script>
element.style.setProperty('--languages-length', 6);
</script>

This can be achieved in Vue as well:

<div 
 class="w-[calc(var(--languages-length)_*_1.25rem_+_3rem)] h-10 bg-red-300" 
 :style="{ '--languages-length': props.languages.length }"
></div>

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

Red-colored text (as displayed in Firefox) is not recognized by JSoup when parsing HTML <img> tags

UPDATE: I was able to answer my own question. JSoup can indeed find all image tags. I've been attempting to scrape content from but encountered a problem. In the website's source code, the main images are displayed in red font, which seems to ...

htmlcssfirefoxjsoup

How to Align position:relative Divs Horizontally Using CSS

My goal is to showcase content from my website located at . I want to have the ability to place this content into a designated div where I can easily center or style it as needed. The issue arises when attempting to float the content, as it doesn't fu ...

csshtmlalignment

Error encountered while trying to load component: template or render function is not defined

I have set up a basic vue.js configuration using browserify and vueify. Following advice from previous tutorials, I included aliasify as a dependency to utilize the template engine. Below is my package.json file: { "name": "simple-vueify-setup", "ve ...

javascriptvue.jsbrowserifyvueify

Unable to display a list using V-for directive in VueJs

I'm currently diving into Vue and trying to loop through an array. I must be missing something because the list isn't showing up in my HTML. Below is the code snippet from an index file that's being rendered through a router view. <templa ...

vue.js

Creating a personalized CSS class for TYPO3 menu links

I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package. My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my ...

csstypo3typoscriptfluidextbase

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

javascripthtmlcssangular

My experience with the Vue.js program has been disappointing as it is failing

Below is an example of my Vue.js code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport&quo ...

vue.jsvuejs2

What are some ways to style an image that has been added using JavaScript using CSS?

I utilized a JavaScript function to add an image, which looked like this: function show_image(src) { var img = document.createElement("img"); img.src= src; document.body.appendChild(img); } But when I attempt to change its style using CSS: img ...

javascriptjqueryhtmlcssimage

Conceal the scroll bar within a div set to 100% viewport

Having some difficulty with a scrollbar on my new portfolio. The layout consists of two columns, with content on the left. I need the ability to scroll without displaying the scrollbar. I attempted the code below but it did not work. Could the issue be rel ...

htmlcss

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...

csstwitter-bootstrap-3

The constant issue persists with the NuxtJS store state variables continuously coming back as

I am facing an issue with the NuxtJs store where it keeps returning undefined. Even after looking at multiple similar questions, I haven't been able to find a solution. Here is my code snippet: import Vue from 'vue' import Vuex from 'vu ...

vue.jsvuexnuxtjs

Is there a way to make FullPage and Lightbox compatible with each other?

Currently utilizing Fullpage.js for my website, I am looking to incorporate a lightbox in one of the sections. However, upon attempting to load the script and CSS, my fullpage layout breaks and the sections collapse. I have experimented with placing the ...

javascriptjquerycsslightboxfullpage.js

Incorporating hCaptcha into Laravel Jetstream with Inertia.js

Currently utilizing Laravel 8 together with Jetstream 2.0 and the Inertia stack. Successfully added the Vue hCaptcha component from here to my login form. The Vue component is functioning perfectly. Followed the instructions provided in this guide to se ...

phplaravelvue.jslaravel-jetstreaminertiajs

Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements ...

cssbootstrap-4

Is it possible to implement navigation guards with file boot in Quasar framework?

Recently, I created a registration app to test login, register, and navigation guards. However, I am facing an issue where I can always open the link. Below are the codes that I have used: const routes = [ { path: '/', component: () ...

vue.js

Tips for aligning thumbnail text to the right on a small viewport with Bootstrap

Here is a visual representation of the standard thumbnail layout Once the viewport reaches the small size, the layout should switch to this design: Bootstrap only shrinks the container by default, as demonstrated in this jsfiddle: http://jsfiddle.net/32 ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Achieving True Nested Divs: Making Children Truly Inside

I want to create nested divs for positioning children with top and left properties, allowing them to overlap each other: https://jsfiddle.net/e0cpuarv/ .boo { position: absolute; left: 10px; top: 10px; width: 100px ...

htmlcss

Concealing a Vuejs dropdown when clicking outside of the component

I am currently working on a Vuejs project where I am creating a menu component. This menu consists of 2 dropdowns, and I have already implemented some methods and used Vue directives to ensure that when one dropdown is clicked, the other hides and vice ver ...

javascriptvue.js

The selenium element for the submit button is currently not responsive to interactions

Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...

pythoncssseleniumautomationelement

Tips for setting up bidirectional communication with props in a Vue.js component

Within my Vue.js component, I am utilizing the "name" props obtained from the parent component. My goal is to establish a two-way communication between the parent and child components using this props. The parent component code looks like this: <script ...

vue.jsvue-props