Scrollbar on tailwind while using overflow-x-hidden

Question

I am using Tailwind in a react project, I detected a scrolling error while using the class overflow-x-hidden. This class adds a vertical scrolling bar in the h1 elements of my component. See the attached image: Screen capture:

The live code can be found here: https://play.tailwindcss.com/UyLgzNMRZZ

My react component looks like this:

function App() {
  return (
    <div className='overflow-x-hidden'>
      <div>
        <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
        <h1 className='font-extrabold text-6xl'>asdfsdf </h1>
      </div>
    </div>

  );
}

export default App;

I am still unsure what is generating this problem on my end, I tried different browsers and the vertical scrollbar is appearing in chrome and firefox. Any suggestions?

Thanks in advance,

Answer 1

This is an ongoing issue for years for now and it's not related to the tailwind specifically(Please see this answer in another question). The scrollbar issue appears because of the way W3C definitions and seems like they insist on doing so. For now only solution for your case would be to add the opposite value whenever you add any of the "x" or "y" variants.

Since you have overflow-x-hidden just add overflow-y-hidden and the problem should be solved.

Answer 2

If I am not wrong you want to remove the overflow x then you can only use overflow-hidden it will solve your problem.

Your Code:

<div class='overflow-hidden'>
      <div>
        <h1 class='font-extrabold text-6xl'>asdfsdf </h1>
        <h1 class='font-extrabold text-6xl'>asdfsdf </h1>
      </div>
</div>

OR You can do like w-screen

Code:

<div class='w-screen'>
      //your code
</div>

Answer 3

I also had the issue.I had to change from this

*{
overflow-x:hidden;
}

to

 body{
overflow-x:hidden;
}

in index.css