Performance problems arising from use of Tailwind CSS drop-shadow class

Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminating the drop-shadow-md class from the @apply directive resolved the issue.

    @layer components {
        .standard-card {
            @apply rounded-md drop-shadow-md bg-surface-content-light dark:bg-surface-content-dark
        }
        /* other classes */
    }

In various discussions, it came to light that any elements with shadows exert a heavy load on the CPU, especially when dynamically rendering components. In my scenario, most components utilizing the standard-card class are rendered through a v-for loop.

<div v-for="chart in ltCharts" :key="chart" class="standard-card flex flex-col gap-2"> ...content... </div>

Are there any viable solutions to address this predicament?

Tech Stack:

  • Vue - 3.2.45
  • PrimeVue - 3.29.2
  • PrimeIcons - 6.0.1
  • Vite - 4.3.9
  • TailwindCSS - 3.3.2

Tailwind Configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {...}
}

Potentially relevant resources:

CSS - drop-shadow issue CSS Text-shadow performance issues.

Answer №1

Upon review, it appears that there is a background color applied to the element, indicating that there is no transparent layering present. In light of this information, an alternative approach could be to utilize box-shadow instead of filter: drop-shadow(). This can be achieved by replacing instances of drop-shadow-* with shadow-*, which is likely to improve performance:

tailwind.config = {
  theme: {
    extend: {
      backgroundColor: {
        'surface-content-light': 'blue',
        'surface-content-dark': 'purple',
      },
    },
  },
};
<script src="https://cdn.tailwindcss.com"></script>

<style type="text/tailwindcss">
@layer components {
  .custom-card {
    @apply rounded-lg shadow-md bg-surface-content-light dark:bg-surface-content-dark
  }
}
</style>

<div class="custom-card flex flex-col gap-2"> ...content... </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

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

I am trying to implement a specific layout using HTML and CSS on a webpage. So far, I have successfully created the black, red, and blue areas, but I am facing challenges with the scrollable green content. It currently has a static height, but I need it to ...

Is there a way to deactivate a clickable div immediately after it has been clicked on?

I have been searching for a solution to this particular question on different platforms, including Stack Overflow. However, I am looking for an answer using pure JavaScript only, so please avoid jQuery solutions. In order to provide context, I have includ ...

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

How to Style CSS specifically for Internet Explorer?

I'm dealing with a simple div that has a 2px thick border and absolute positioning, but it's hidden until its parent element is hovered over. The issue arises in IE due to the box model, causing the position of this div to be somewhat off in IE c ...

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

Struggling to integrate the navigation bar with Wordpress platform

For a while now, I have been facing challenges with the navigation bar on the WordPress theme I am currently creating. I am struggling to get the navigation bar to display correctly. Below is the code snippet from my header.php file: <body> &l ...

Is there a way to prevent this picture from shifting?

I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. Howe ...

Transforming a subnav bar into a dropdown on smaller screens

Hello everyone, I'm new here and seeking some guidance. Please bear with me if I seem a bit lost or naive. I am attempting to replicate the navigation bar from this website: WOHA. While I don't need it to be an exact replica, I have managed to cr ...

The differences between xPages and HTML templates are evident in the varying sizes of their elements

When using a html template in an xPages application, I noticed that all elements appear slightly larger compared to a plain html page. Even when checking the values in Chrome debugger, they all seem to be the same. ...

Troubleshooting: Font-Face Won't Load on Any Browser

I'm completely new to using @font-face and I'm encountering some issues. Despite going through numerous posts and tutorials, I can't seem to get my fonts to load properly. I've tried activating and deactivating the font on the server, b ...

Issue: app.database function is not recognized with Firebase

I'm attempting to integrate Firebase realtime database into my Vue application, but I keep encountering the following error: TypeError: app.database is not a function This is what my code looks like: File: Firebase.js var firebase = require(' ...

What is the best method for integrating Vuepress into a Nuxt project?

I'm currently working on integrating Vuepress into my Nuxt app. I followed the steps of adding Vuepress using yarn add vuepress@next -D and setting up a docs folder with a readme.md file inside. The issue: The project is only displaying the sidebar a ...

implement a discount and waive tax computation specifically for Canadian customers

I have encountered a problem while developing a POS application for a client in Canada. My issue lies in the tax calculation process, where I am unsure how to handle discounts and tax exemptions properly. Here is the scenario: I have 2 items - item 1 price ...

The data retrieved from the PHP script is not accessible within the main Vue instance

I am currently working on a Vue.js component for a modal window. Once the user fills out all the necessary data in the fields, I need to achieve the following: Send the data to the server. Apply a timeout to show the user that the data is being sent (by ...

how to switch page direction seamlessly in vue without triggering a page refresh

I'm looking to update the page direction in Pinia whenever a value changes, and while my code is functioning correctly, it reloads the page which I want to avoid. Take a look at my App.vue <script setup> import { useaCountdownStore } from " ...

Darkening the background of HTML and CSS text to black

I'm having trouble removing the black background from the navigation. It doesn't appear to be styled in black when I inspect each element individually. Here is an image showing the issue: https://i.stack.imgur.com/gvbn8.png @charset "UTF-8"; ...

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

What is the best way to create distance between my buttons?

Can anyone help me with an issue I'm facing where adding margin to my buttons is causing the last button to jump down a row? I have an idea of what might be happening but I'm unsure how to solve it. Below is the CSS code for the buttons, any sugg ...

Ways to manage the size of Material-UI vertical tabs?

After receiving assistance from others on the thread about Creating a Material-UI tab with image tabs instead of text labels, I was able to successfully implement images for my Material-UI tabs. However, I am facing an issue where I am unable to control th ...

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...