title: How to use smooth-scroll from tailwindcss in React?
body: <p>I have created a one-page website using <code>tailwindcss</code> and <code>React</code>. In the prototype I use the <code>tailwindcss</code> class &quot;scroll-smooth&quot; and it works. In <code>React</code> the class &quot;scroll-smooth&quot; does not work, but what is the reason?</p>
  <p><a href="https://tailwindcss.com/docs/scroll-behavior#basic-usage" rel="nofollow noreferrer">https://tailwindcss.com/docs/scroll-behavior#basic-usage</a></p>
  <p>When I click &quot;Why&quot; on Navigation i jump to the section &quot;why&quot; but not smoothly:</p>
  <pre><code>function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;relative&quot;&gt;
          &lt;div className=&quot;flex flex-col scroll-smooth&quot;&gt;
  
            &lt;HomeNav /&gt;
  
            &lt;HomeHero /&gt;
  
            &lt;section id=&quot;why&quot; className=&quot;flex flex-col items-center px-6 pt-20&quot;&gt;
              ...
            &lt;/section&gt;
            &lt;HomeFooter /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Solution:</strong></p>
  <p>I think <code>TailwindCss</code> Class &quot;scroll-smooth&quot; it doesn't work on react. So I use the <code>NPM</code> package &quot;react-scroll&quot; with which it works great and I probably have less compatibility worries.</p>
  <p><a href="https://www.npmjs.com/package/react-scroll" rel="nofollow noreferrer">https://www.npmjs.com/package/react-scroll</a></p>