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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You don’t have to reuse anything. With <code>tailwindcss/nesting</code> you could replicate your html structure 100% in your css and use zero class name. More likely though, you can settle in between of reusing and non-reusing in a zone that you feel conformable. It is a legal and supported usage of tailwind. I use tailwind not because of I agree with the authors philosophically; it has good documentation and is generally not opinionated, that’s all.</p>
<p>Also, I like tailwind now; but I still like to reserve the right of ditching tailwind in the future. With the css and template fully decoupled I could do so with minimum effort.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241231" data-batch-url="/posts/batch_likers">
                        1
                      </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/phoenix-asset-management-watchers/45661/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-241231" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241231"
                     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="241232" data-post-id="241232">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cvkmohan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/120/39944_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cvkmohan
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>[quote=“derek-zhou, post:12, topic:45661, full:true”]<br>
With <code>tailwindcss/nesting</code> you could replicate your html structure 100% in your css and use zero class name. [/quote]<br>
Can you please expand a bit on this? May be some small example will help.</p>
<p>Agree with the rest of things.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241232" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-241232" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241232"
                     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="241233" data-post-id="241233">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This project is still using tailwind 2, but the idea is the same.</p>
<p><a href="https://github.com/derek-zhou/gara/blob/main/assets/css/app.css" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/derek-zhou/gara/blob/main/assets/css/app.css</a></p>
<p>postcss can be nested in the same way of sass. So in the extreme case, you could match your css to your html and be very specific. In the above example, I was using a middle ground though.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241233" data-batch-url="/posts/batch_likers">
                        1
                      </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/phoenix-asset-management-watchers/45661/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-241233" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241233"
                     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="241274" data-post-id="241274">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cvkmohan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/120/39944_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cvkmohan
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks like this problem is for real. <a href="https://github.com/tailwindlabs/tailwindcss/issues/7136" rel="noopener nofollow ugc">Tailwind v3 PostCSS Plugin: <code>--watch</code> does not rebuild CSS on changes to content (HTML) files · Issue #7136 · tailwindlabs/tailwindcss (github.com)</a><br>
<a class="mention" href="/u/soup" rel="nofollow">@soup</a> - I think you are right. vite/parcel/tailwind all of them watch for the content using tailwind.config.js only - and - no need to add the template files to the watch list.</p>
<p>I have created an issue here <a href="https://github.com/parcel-bundler/parcel/issues/7634" rel="noopener nofollow ugc">Tailwind integration into Phoenix Framework - watch not rebuilding changes to content · Issue #7634 · parcel-bundler/parcel (github.com)</a><br>
Just recording it here - someone might find it useful.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241274" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-241274" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241274"
                     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="241639" data-post-id="241639">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="soup" data-post="2" data-topic="45661">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/soup/48/31425_2.png" class="avatar"> soup:</div>
<blockquote>
<p>hey also run these things”, but it doesn’t actually “watch” for changes and <em>then</em> run them.</p>
</blockquote>
</aside>
<p>I was surprised by this. I’m working on an Elm installer/compiler based on <a href="https://github.com/phoenixframework/esbuild" rel="noopener nofollow ugc">phoenixframework/esbuild</a> and <a href="https://github.com/phoenixframework/tailwind" rel="noopener nofollow ugc">phoenixframework/tailwind</a> but I’m having to build out the watching myself because the <code>elm</code> binary doesn’t have a <code>--watch</code>-like mode.</p>
<p>Maybe I’m missing something, but if Phoenix would also watch for changes then each delegated binary wouldn’t have to watch on its own.</p>
<p>I’d prefer not to wrap <a href="https://github.com/watchexec/watchexec" rel="noopener nofollow ugc">watchexec</a> or <a href="https://eradman.com/entrproject/" rel="noopener nofollow ugc">entr</a> and it seems overly complicated to start a process and use <a href="https://github.com/falood/file_system" rel="noopener nofollow ugc">file_system</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241639" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-241639" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241639"
                     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="241641" data-post-id="241641">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hmm, maybe I was looking in the <a href="https://github.com/phoenixframework/phoenix/blob/0776425f8bbf32238b4daf4e4fc12c8fa6d04318/lib/phoenix/endpoint/watcher.ex" rel="noopener nofollow ugc">wrong place</a> and I should instead be using something more like <a href="https://github.com/phoenixframework/phoenix_live_reload" rel="noopener nofollow ugc">phoenix_live_reload</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241641" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-241641" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241641"
                     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="270791" data-post-id="270791">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>How does Phoenix live reload differ from updating an asset in assets dir and letting Phoenix react to that? … Actually, I don’t understand how Phoenix knows to reload a page when a js asset has updated. Wouldn’t Phoenix have to parse the html and determine that a script was included in a page?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="270791" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-270791" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="270791"
                     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="272583" data-post-id="272583">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>After further thought, I believe Phoenix will reload server rendered templates, but it won’t reload assets like js files unless you use the phoenix live reload library and specify which assets to perform live reload.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="272583" data-batch-url="/posts/batch_likers">
                        0
                      </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/phoenix-asset-management-watchers/45661/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-272583" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="272583"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>