title: Vuetify CSS change order during webpack build
body: <p>I am creating a web app using Vue (3.1.3) and Vuetify (1.3.8). All seems to be fine, but when I do production build, Vue somehow changes the CSS order.</p>
  <p>The problem is with classes <code>.v-list__tile__content</code> and <code>.align-end</code>.</p>
  <p>In vuetify.css, they are on lines 4844 and 7236 respectively, but after <code>npm run build</code> in <code>dist/css/chunk-vendors.*.css</code> they are on positions 108929 and 100729. This means, that the order in which the styles are applied is switched and this div:</p>
  <p><code>&lt;div class=&quot;v-list__tile__content align-end&quot;&gt;...&lt;/div&gt;</code></p>
  <p>then looks differently on dev server and production.</p>
  <p>DEV:
  <a href="https://i.stack.imgur.com/90miD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/90miD.png" alt="enter image description here" /></a></p>
  <p>PROD:
  <a href="https://i.stack.imgur.com/k5NwI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k5NwI.png" alt="enter image description here" /></a></p>
  <p>The div is generated by this component:</p>
  <pre><code>&lt;v-list-tile-content class=&quot;align-end&quot;&gt;{{ dish.price }}&lt;/v-list-tile-content&gt;
  </code></pre>
  <p>The problem is with the <code>align-items: flex-start/flex-end;</code></p>
  <p>Is there some system solution to this? I guess I can override it by directly setting the style, but it might happen again.</p>