title: Getting buttons to stretch full screen with Tailwind
body: <p>I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen! </p>
  
  <p>I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as <code>button</code>s, not <code>div</code>s. </p>
  
  <p>Code (stretching off screen version) currently looks like this: </p>
  
  <pre><code>&lt;body&gt;
  ...
  &lt;div class=""&gt;
      &lt;div class="block"&gt;
          &lt;ul class=""&gt;
              &lt;li&gt;&lt;button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4"&gt;
                      &lt;div class="text-black text-lg content-center"&gt;
                          &lt;h2 class="font-bold"&gt;Mike's big adventure&lt;/h2&gt;&lt;br&gt;
                          &lt;div class="text-black text-base"&gt;Aargh, zombies!&lt;/div&gt;
                          &lt;div class="text-gray-600 text-xs"&gt;
                              &lt;div&gt;Created: 2020-03-24T12:57:01.753Z&lt;/div&gt;
                              &lt;div&gt;Updated: 2020-03-24T13:00:06.411Z&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/button&gt;&lt;/li&gt;
              ... more list items
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)</p>
  
  <p>How do I need to nest the various <code>container</code>, <code>w-full</code>, <code>w-screen</code>, <code>button</code> etc. and what combo do I need to get what I want?</p>
  
  <p>Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ... </p>
  
  <p>Header:</p>
  
  <pre><code>&lt;div class="container flex-auto w-screen m-2"&gt;
     &lt;div class="w-full content-center bg-orange-500 rounded-lg"&gt;
        &lt;h1 class="font-bold text-5xl text-center"&gt;Header&lt;/h1&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>Footer:</p>
  
  <pre><code>&lt;div class="container flex-auto w-screen mx-2"&gt;
     &lt;div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2"&gt;
        &lt;div class="m-4"&gt;Footer&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>