<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="373137" data-post-id="373137">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tozz" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tozz
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve been using Tailwind a lot and we’re using it in a project at work, however for LiveView I find it quite unsuitable because of all the class diffing over the wire and resulting DOM updates.</p>
<p>Long before Tailwind ever existed I came to the conclusion that utility classes + components are the way to go with CSS (imo obviously) and with all the new:ish niceties of CSS layers, <code>@starting-style</code>, <code>light-dark()</code>, <code>color-mix()</code> combined with <code>:has</code>, <code>:is</code> and <code>:where</code> it’s just far easier to write CSS manually with the benefit of much more optimal LiveView messages. I do include the <code>preflight</code> and <code>variables</code> from Tailwind (as stand alone files) because I think they’re sane defaults and the colors are nice.</p>
<p>This combined with <code>esbuild</code> and I feel I have a really nice way of doing web.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373137" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-373137" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373137"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="373138" data-post-id="373138">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dimitarvp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dimitarvp/120/38664_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dimitarvp
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tozz" data-post="12" data-topic="72401">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/a8b319/48.png" class="avatar"> tozz:</div>
<blockquote>
<p>however for LiveView I find it quite unsuitable because of all the class diffing over the wire and resulting DOM updates</p>
</blockquote>
</aside>
<p>Could you clarify on that, please? Do you mean that this leads to more often sending diffs from the server?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373138" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-373138" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373138"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="373140" data-post-id="373140">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="dimitarvp" data-post="13" data-topic="72401">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dimitarvp/48/38664_2.png" class="avatar"> dimitarvp:</div>
<blockquote>
<p>Could you clarify on that, please? Do you mean that this leads to more often sending diffs from the server?</p>
</blockquote>
</aside>
<p>Marlus did a great talk about the topic:</p><div class="youtube-onebox lazy-video-container" data-video-id="kBU4v609DOU" data-video-title="Optimizing LiveView for Realtime Applications by Marlus Saraiva | ElixirConf EU 2023" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=kBU4v609DOU" target="_blank" class="video-thumbnail" rel="noopener nofollow">
    <img class="youtube-thumbnail" src="https://i.ytimg.com/vi/kBU4v609DOU/hqdefault.jpg" title="Optimizing LiveView for Realtime Applications by Marlus Saraiva | ElixirConf EU 2023" width="480" height="360">
  </a>
</div>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373140" data-batch-url="/posts/batch_likers">
                        9
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-373140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373140"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="373145" data-post-id="373145">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tozz" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tozz
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You already got a good video referenced, but yes, since most of the time your classes are a list (variable) and LV is forced to send it as a whole.</p>
<p>Very common are things like</p>
<pre data-code-wrap="xml"><code class="lang-xml">&lt;div class=”form-element”&gt;
&lt;input … class={[“bg-blue-500 text-sm rounded-xl”, error &amp;&amp; “bg-red-500”]} /&gt;
&lt;div :if={error} class="errors"&gt;You have an error&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Instead you can do something like the following (CSS supporting nesting selector nowadays really help).</p>
<pre data-code-wrap="css"><code class="lang-css">.form-input {
  background: blue;
}

.form-element {
  &amp;:has(.errors) {
    .form-input {
      background: red;
    }
  }
}
</code></pre>
<pre data-code-wrap="xml"><code class="lang-xml">&lt;div class=”form-element”&gt;
&lt;input … class="form-input" /&gt;
&lt;div :if={error} class="errors"&gt;You have an error&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Somewhat contrived maybe, but I think it shows the concept of having a few variables as possible in your LV and letting CSS do the “heavy” lifting.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373145" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-373145" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373145"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="373146" data-post-id="373146">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Zurga" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Zurga/120/38832_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Zurga
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve been bundling <a href="https://picocss.com" rel="noopener nofollow ugc">Pico</a> with my personal flavour of Phoenix. Works great, some of the buttons in forms are a bit wide, but it is easy to fix.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373146" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-373146" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373146"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="373147" data-post-id="373147">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dimitarvp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dimitarvp/120/38664_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dimitarvp
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That’s actually interesting, thanks. I’ve been doing a lot of LiveView lately and still trying to make it as fast as it can possibly be.</p>
<p>We do make a heavy use of Tailwind however, and replacing it is not on the table – I wonder how can we still make use of those techniques when you f.ex. change a class or two depending on state.</p>
<p>I’ll watch the video.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373147" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-373147" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373147"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="373148" data-post-id="373148">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>We learned a big lesson from Tailwind, especially with the release of version 4. If you own a UI library and are planning to have many components (more then 90), it’s better to write pure CSS instead of using Tailwind. Unfortunately, for the <a href="https://mishka.tools/chelekom" rel="noopener nofollow ugc">Mishka Chelekom</a> project, there’s no turning back, we have to continue with Tailwind.</p>
<p>From version 2 to 3, some parts of the code changed, and now it’s been a week that we’ve been dealing with code issues caused by the changes in priority in Tailwind version 4.</p>
<p>All colors changed in Tailwind 4 for example <img src="https://forum.elixirforum.com/images/emoji/apple/upside_down_face.png?v=15" title=":upside_down_face:" class="emoji" alt=":upside_down_face:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373148" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-373148" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373148"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="373157" data-post-id="373157">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hauleth" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hauleth/120/18942_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hauleth
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Even better - do it semantically instead of classes:</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;div&gt;
  &lt;input aria-invalid={error} /&gt;
  &lt;div class="error"&gt;You have an error&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>And in CSS:</p>
<pre data-code-wrap="css"><code class="lang-css">.error { display: hidden }

input:invalid {
  background: red;
  &amp; + .error, &amp;[aria-invalid] + .error { display: block }
}
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373157" data-batch-url="/posts/batch_likers">
                        10
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-373157" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373157"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="373161" data-post-id="373161">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="krasenyp" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/krasenyp/120/39733_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  krasenyp
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I was a primarily front-end-focused developer for 6 years, in my previous life. I really dislike Tailwind because everything it does, I can do better with plain CSS. I know how to write maintainable code and use the cascading styles to my advantage.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373161" data-batch-url="/posts/batch_likers">
                        7
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-373161" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373161"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="373167" data-post-id="373167">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tozz" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tozz
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sure, semantic is good, but that selector doesn’t do the same thing. <code>:invalid</code> is the default for any input type where empty is invalid. You also get quite a lot of flickering for certain types (which can be fine, it depends on the goals)</p>
<p>Next sibling selector tend to be quite volatile in my experience since it locks visuals to markup order.</p>
<p>There are plenty of ways of doing this, the core of it is to avoid variables to make diffs smaller for LV.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="373167" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/anyone-not-using-tailwind-in-a-phoenix-project/72401/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-373167" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="373167"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/72401/load_more?page=3">Load more posts (68 remaining)</a>
</div></template></turbo-stream>