title: TailwindCss Fixed NavBar
body: <p>I'm trying to create a <code>Fixed Navigation Bar</code> in <code>Tailwind CSS</code> and sticky scroll main page, but no matter what I try, I can't make it work...</p>
  <p>Here is what I achieved:</p>
  <p><a href="https://i.stack.imgur.com/9g8C3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9g8C3.png" alt="enter image description here" /></a></p>
  <p>Here is my Code:</p>
  <pre><code>&lt;!-- NavBar --&gt;
  &lt;header class=&quot;fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center&quot;&gt;
      &lt;router-link to=&quot;/&quot; class=&quot;text-2xl text-white&quot;&gt;My App&lt;/router-link&gt;
      &lt;div&gt;
          &lt;router-link to=&quot;/login&quot; class=&quot;text-white hover:bg-gray-700 px-3 rounded py-1&quot;&gt;Login&lt;/router-link&gt;
          &lt;router-link to=&quot;/register&quot; class=&quot;text-white hover:bg-gray-700 px-3 rounded py-1&quot;&gt;Register&lt;/router-link&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class=&quot;flex&quot;&gt;
      &lt;!-- Sidebar --&gt;
      &lt;aside class=&quot;fixed bg-white h-screen py-5 shadow&quot;&gt;
          &lt;div class=&quot;flex flex-col text-left&quot;&gt;
              &lt;router-link to=&quot;/&quot; class=&quot;hover:bg-gray-400 px-12 py-2 rounded&quot;&gt;
                  &lt;i class=&quot;fa fa-dashboard&quot;&gt;&lt;/i&gt;
                  &lt;span class=&quot;&quot;&gt;Dashboard&lt;/span&gt;    
              &lt;/router-link&gt;
          &lt;/div&gt;
      &lt;/aside&gt;
      &lt;!-- Main Page --&gt;
      &lt;main class=&quot;bg-gray-200  flex-1&quot;&gt;
          &lt;transition name=&quot;slide-fade&quot;&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
          &lt;/transition&gt;
      &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>