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

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

Is it possible to align two buttons side by side on a webpage using only HTML and CSS?

Can you help me figure out how to align two buttons next to each other with some space between them using only css and html? If you take a look at my html code and css code, you'll see that the two buttons are not aligned properly. * { margin: 0 ...

htmlcss

Issue with setting a background image to a div in Next.js: not functioning as expected

I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, whi ...

htmlcssjsxnext.js

TailWind CSS output.css file does not include every single class available in the library

While generating a Tailwind output CSS file, I noticed that it is not generating all the expected classes. For example, Tailwind supports margins and padding up to -16, but it only generates classes from 1 to 4. Anything beyond 4 does not work. Here is a ...

next.jstailwind-css

Master the Art of Scrollbar Control in Angular!

I am currently developing a chat web application that functions similar to gchat. One of the key features I'm trying to implement is an alert notification when the scrollbar is in the middle of the div, indicating a new message. If the scrollbar is at ...

javascriptjqueryhtmlcssangularjs

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

javascriptjquerycss

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

htmlcssfontswebfontshandwriting

Is there a way to align the line under the hyperlinks to match the text size using CSS?

<div className={styles.container}> <ul className={styles.links}> <li className={styles.link}> <a href="/">Home</a> </li> <li className={styles.link}> <a href="/portfolio& ...

htmlcssnext.js

Maximize the use of the tailwind @apply feature within CSS modules in Next.js for

I have successfully integrated Tailwind CSS into my Next.js site following the steps in the official guide available at this link. However, I encountered an issue when attempting to use the @apply method within a CSS module on a component level. For insta ...

next.jscss-modulestailwind-css

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

Guide on integrating buefy (a vue.js component library) into your Laravel blade template

I'm currently integrating buefy into my project, but I'm encountering issues with using vue.js on Laravel 5.8. Can anyone offer assistance? Here is the code snippet from my app.js: require('./bootstrap'); window.Vue = require('v ...

javascriptphpvue.jslaravel-5

What is the best way to customize the cursor for each individual div?

Can you alter the cursor from a pointer to "not-allowed" within the div or GridList element in ReactJS or Material UI? ...

cssreactjsmaterial-ui

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...

cssangularangular-materialangular8

What is the best way to align a div with a td within a table?

I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this? Here's my HTML code for the table : ...

htmlcss

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

javascriptcssvue.jsflexboxvuetify.js

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

csswebnext.jshover

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

htmlcssangular

Develop a chart featuring sub-categories and column headings

I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...

htmlcss

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...

cssimagecodeignitercodeigniter-3dompdf

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons disrupt the rounded corners of th ...

cssangularjs