Transition delays in Tailwind CSS when dark mode is activated

My dark mode toggle is functioning with the following CSS:

:root {
    --primary: var(--white);
}

.dark {
    --primary: var(--black);
}

However, when I include the following code:

* {
  @apply transition-colors duration-700;
}

The background colors of my divs transition smoothly, but there is a delay of about a second in the color transition of the text, which doesn't look good. Why is this happening and how can I solve this issue?

UPDATE: You can see this issue in action here: https://play.tailwindcss.com/DdPehHPHj1

Answer №1

Encountered a similar issue, resolved it by specifically defining text colors for all elements.

Previous

<p class="">Interested in diving deeper into Tailwind?</p>

Resulting

<p class="text-black dark:text-white">Interested in diving deeper into Tailwind?</p>

View the corrected example

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

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

Tips for altering CSS using the `:hover` pseudo-class

CSS Style for Navbar .navbar li { color: #B7B7B7; font-family: 'Montserrat', sans-serif; font-size: 14px; min-width: 70px; padding: 22px 16px 18px; } .navbar #menumain ul { width: 120%; } .navbar ul ul { display: none; } <div ...

AngularJS encountered an unhandled syntax error

My current approach involves utilizing the code below to display data fetched from Parse API into a table using AngularJS and Bootstrap. However, the JavaScript section where I have defined the controller doesn't seem to be running as expected. Below ...

Achieving Content Alignment Using CSS

I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen reso ...

When the window width increases, the image within a flexbox causes the flexbox to break

I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...

Arranging divs with CSS positioning

I struggle with positioning divs, especially in this particular situation. I am attempting to position boxes in the following layout: _ ___ _ |_|| ||_| _ | | |_||___| Is there a way to avoid manually defining pixel positions for each box and ins ...

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Recently, I implemented Tailwind CSS to style my application. It has been a helpful tool, but I am looking to consolidate all the CSS into one file for better organization. I want to keep it separate from the HTML code. My attempt to convert the following ...

The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

Within my markup, I have an image field that I am setting the source for using JavaScript. I am in need of its height and width, so I utilized the image.height() and image.width() methods. Despite working properly in Internet Explorer, these methods do not ...

What steps should I take to address the issue of fixing the classname rather than using the

<div ng-class:"{{myclass}}" role="progressbar" aria-valuenow="{{roundedtotalPerformanceCount}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( totalPerformanceCount + '%' ) }"> {{roundedtotalPerformanceCou ...

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

Tips for creating a smooth transition effect using CSS/JavaScript pop-ups?

Looking for some assistance in creating a CSS pop-up with a touch of JavaScript magic. I've managed to trigger the pop-up box by clicking a link, and while it's visible, the background fades to grey. But I'm struggling to make the pop-up fad ...

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

A guide on implementing CSS and Styling in a React component

Struggling to style my React.js file that was converted from a standard web page. I have the original CSS but unsure how to use React for proper styling. Any assistance is welcomed! var NavBar = React.createClass({ render: function() { return ( ...

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

Levitating with Cascading Style Sheets

Looking for some assistance to troubleshoot my code. I am trying to make the hover color apply only to the navigation bar and not affect the pictures. I attempted to solve this by specifying .a.main-nav:hover { ...}, but it ended up removing the hover effe ...

Is it possible to have a full-width thumbnail navigator in a full-width slider container with Jssor Slider?

I apologize if this topic has already been discussed, In a responsive full-width slider container, I am utilizing thumbnail navigator 03 with the scaling option disabled. Is it feasible to have a fixed-height, but fully (100%) width thumbnail navigator t ...

The second pop-up modal fails to appear

I have successfully implemented 2 modal windows with the help of bootstrap. The first modal is used for adding a user to the database, and the second one is meant for editing an existing user. While the first modal works perfectly fine, the editing modal d ...

What is the best method for locating X-Path for elements inside a frameset?

I need help creating a test case for Selenium because I am struggling to locate elements on my website. The issue seems to be related to the fact that my site uses an HTML frame set. When I try to select all links using Firebug: //a I do not get any res ...