title: Svelte: Specify multiple conditional class attributes
body: <p>I would like to have something like this made possible:</p>
  
  <pre><code>&lt;div 
     class="overflow-scroll h-screen antialiased ..."
     class:whiteTheme="bg-gray-100 text-gray-800 ..."
     class:darkTheme="bg-blue-900 ..."
  &gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>So one set of classes that will always be applied. One set only if <code>whiteTheme</code> is true and another only if <code>darkTheme</code> is true.</p>
  
  <p>I know that i can define a <code>whiteTheme</code> and a <code>darkTheme</code> css class and make it just work like that</p>
  
  <pre><code>&lt;div 
     class="overflow-scroll h-screen antialiased ..."
     class:whiteTheme
     class:darkTheme
  &gt;
  </code></pre>
  
  <p>But the point is that i want to design each element individual (esp. in the starting phase of my application). And having to define my set of classes for each element in a different class... defies for me the purpose in using Tailwind.css and experimenting on the specific elements (without jumping back and forth between css definitions and element definitions).</p>
  
  <p>Another way i could choose is this:</p>
  
  <pre><code>&lt;div 
     class="overflow-scroll h-screen antialiased ... {whiteTheme?'bg-gray-100 text-gray-800 ...':'bg-blue-900 ...'}"&gt;
  </code></pre>
  
  <p>This is kind of ok, but i would love to increase readability and maintainability by defining things in separate attributes...</p>
  
  <p>So i'm wondering if there is a way to make it work the way i want to... E.g. can i extend the Svelte compiler for that easily ?</p>
  
  <p>best
  Johannes</p>