Why is Tailwind CSS breaking my existing CSS Code? [duplicate]

Question

Summary: Existing CSS code for setting an HTML element's width to 100% of viewport width fails when tailwindcss is added. For an element who's display is set to display: flex; the children being directly force fit within the viewport. This is not desired. This issue is also faced when Tailwindcss is not used.

Note:

Not using TailWindCSS is not an option. My main code uses tailwindcss heavily. This feature is being added later.
I am creating this for the mobile version of the website.
I want to see each individual element within the flex'ed parent element to be of the same 100 viewport width size.
I'm saying 100 because it is easier to read and remember. You will find "96vw" in the code. But the issue persists even with "100vw".

Now, going in detail:

Okay. So I have a simple code where the width of section element set to "100vw" - meaning the full screen.

Once I made the appropriate settings, I tried adding TailwindCSS to draw some animations and decorate the webpage.

I followed the Tailwindcss installation docs via CLI: https://tailwindcss.com/docs/installation/tailwind-cli

As soon as I connect my html page with the "output.css" file as shown in step 4, all of the sections are forcefully fit in the same width! It is no longer 100vw for each section. Instead, all sections are fit inside the same 100vw.

You can see how there are no TailwindCSS or even any user defined classes that are added to the HTML file. Why is this happening??

I have added the ability to run my code. If you want to see the rest of the videos as well, then change the 'transform' CSS property of the #slider element to "translateX(-100.5vw)" and "translateX(-200.5vw)".

Now, if you uncomment the  in the HTML file, then you would see that all the videos are aligned this way. (See Image)

This is not desired. When that Line of Code is commented.. or in other words, when the TailWindCSS library is disconnected from the main HTML file, it behaves as intended. See image:

Note that I have changed the videos that are being displayed for demonstration. But the issue persists even with the original videos that I want to display.

body{
    width: 100vw;
    background-color: white;
}

#container{
    margin-top: 30vh;
    overflow: hidden;
    /* transform: translateX(-10vw); */
}

#slider{
    display: flex;
    transition: transform 1s linear;
    transform: translateX(-0.5vw);
}



#project1 video, #project2 video, #project3 video{
    width: 96vw;
}

/* #project1 {
    margin-right: 4vw;
/* } */

#project1, #project2, #project3 {
    margin-inline: 2vw;
} 

p{
    text-align: center;
    color: aqua;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Testing overflows</title>
        <link rel="stylesheet" href="index.css">
         <!--<link rel="stylesheet" href="output.css"> -->
    </head>

    <body >
        <section id="container">
            <div id="slider">
                <section id="project1">
                    <video controls 
                    src="https://1mm9hhqsjgoh4ol8.public.blob.vercel-storage.com/test_video1"></video>
                    <div>
                        <p>This is text</p>
                    </div>
                </section>
                <section id="project2">
                    <video controls
                    src="https://1mm9hhqsjgoh4ol8.public.blob.vercel-storage.com/test_video2"></video>
                    <div>
                        <p>This is text</p>
                    </div>
                </section>
                <section id="project3">
                    <video controls
                    src="https://1mm9hhqsjgoh4ol8.public.blob.vercel-storage.com/test_video3"></video>
                    <div>
                        <p>This is text</p>
                    </div>
                </section>
            </div>
        </section>
    </body>
</html>

It's important to note with the Tailwind CLI that the browser tends to cache the output.css. Bundlers like Vite/Webpack, on the other hand, ensure that the file containing the generated CSS is always unique, e.g. output.css?unique-id-here. — rozsazoltan, Commented Sep 21 at 9:01

TylerH · Accepted Answer · 2025-09-22 14:13:30Z

1

To fix this issue, go to the "output.css" file that is created and comment out the following selector: img, video tag {}

img, video {
    /* max-width: 100%; */
    height: auto;
}

This will resolve the issue.

I think this will resolve any issue relating to changes that are automatically made when Tailwind CSS is added to the project.

edited Sep 22 at 14:13

TylerH

21.2k8383 gold badges8484 silver badges121121 bronze badges

answered Sep 20 at 6:19

Ishan Sathe

5155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Tailwind CSS breaking my existing CSS Code? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related