title: VueJS TailwindCSS paddings aren't responsive
body: <p>In the first line of my code, I am expecting to have padding x-3 on mobile and padding x-32 on web version.
  Everything works great on mobile but when I switch back to web version the padding x is still 3 not 32.</p>
  <pre><code>&lt;div class=&quot;px-3 md:px-32 md:py-16&quot;&gt;
          &lt;div class=&quot;pb-16&quot;&gt;
            &lt;img src=&quot;../assets/line.svg&quot; alt=&quot;&quot; class=&quot;pb-2&quot; /&gt;
            &lt;p class=&quot;text-4xl text-left bt-medium pb-3&quot;&gt;Example&lt;/p&gt;
            &lt;p class=&quot;text-4xl text-left bt-book&quot;&gt;
              ExampleExampleExampleExampleExampleExample
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex md:flex-row flex-col items-center justify-between&quot;&gt; 
            &lt;div class=&quot;px-3 flex flex-col items-center pb-8 md:pb-0&quot;&gt;
              &lt;div
                class=&quot;border-1 border-border-gray rounded-xl md:shadow-2xl w-full md:w-96 h-72 border-1 px-8 pt-8 relative pb-24&quot;
              &gt;
                &lt;img class=&quot;w-12 h-12 mb-6&quot; src=&quot;../assets/Example.png&quot; /&gt;
  
                &lt;p class=&quot;text-left bt-smalltitle font-bold pb-3.5&quot;&gt;
                  ExampleExampleExample
                &lt;/p&gt;
                &lt;p class=&quot;text-left bt-smalltext&quot;&gt;
                  ExampleExampleExampleExampleExampleExample
                &lt;/p&gt;
              &lt;/div&gt;
              &lt;div
                class=&quot;bg-custom-gray hover:bg-custom-blue duration-300 h-9 w-11 relative rounded-xl -mt-6&quot;
              &gt;
                &lt;button class=&quot;z-50&quot;&gt;
                  &lt;img src=&quot;../assets/Arrow.svg&quot; alt=&quot;&quot; class=&quot;px-2 py-1.5&quot; /&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>Here is my tailwind.config.js</p>
  <pre><code>const tailwindcss = require(&quot;tailwindcss&quot;);
  module.exports = {
    purge: [&quot;./public/**/*.html&quot;, &quot;./src/**/*.{vue,js,ts,jsx,tsx}&quot;],
    content: [],
    variants: {
      display: [&quot;responsive&quot;],
      textColor: [&quot;responsive&quot;, &quot;hover&quot;, &quot;focus&quot;, &quot;group-hover&quot;],
    },
    theme: {
      extend: {
        colors: {
          &quot;custom-blue&quot;: &quot;#0096FF&quot;,
        },
        animation: [&quot;group-hover&quot;],
      },
    },
    variants: {
      textColor: [&quot;responsive&quot;, &quot;hover&quot;, &quot;focus&quot;, &quot;group-hover&quot;],
      backgroundColor: [&quot;responsive&quot;, &quot;hover&quot;, &quot;focus&quot;, &quot;group-hover&quot;],
      display: [&quot;responsive&quot;, &quot;hover&quot;, &quot;focus&quot;, &quot;group-hover&quot;],
    
    },
    plugins: [],
  };
  </code></pre>