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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="cnck1387" data-post="11" data-topic="38531">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/c/2bfe46/48.png" class="avatar"> cnck1387:</div>
<blockquote>
<p>I have to wonder if it’s a Webpack 4 thing</p>
</blockquote>
</aside>
<p>That is my feeling, either by side effect of it using older plugins or wp4 itself. There <em>are</em> open issues on the tw-jit talking about other build systems, so there might be some amount of friction in both directions.</p>
<p>There is a webpack5 PR/issue for Phoenix, I think the plan is to migrate eventually.</p>
<p>Though by looking onto this, manually migrating a project to another build system wouldn’t actually be very hard. Basically update <code>:watchers</code> in your <code>dev.exs</code> and then follow whatever your chosen build system asks you to do.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208594" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-208594" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208594"
                     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="208595" data-post-id="208595">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>If you’re ok with running the Webpacker watcher separately you can use Webpack 5 with Phoenix without any modifications. I’ve been doing that for a long time now.</p>
<p>In development you just need to run: <code>webpack --mode=development --progress --watch</code></p>
<p>And on the Phoenix side of things in your config you set <code>watchers: []</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208595" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-208595" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208595"
                     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="208598" data-post-id="208598">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just out of curiosity, if you set <code>watchers</code> to</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">[webpack: ["--mode=development", "--progress", "--watch"]] 
</code></pre>
<p>That <em>should</em> be enough to get Phoenix to run the webpack dev server for you. Does that work?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208598" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-208598" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208598"
                     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="208602" data-post-id="208602">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I run Phoenix and the Webpack dev server in separate Docker containers and up everything together with Docker Compose so I’m not really in a position to try and run the watcher inside of Phoenix since my Phoenix app doesn’t have the Node environment in it.</p>
<p>Perhaps someone else will be able to test that for you.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208602" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-208602" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208602"
                     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="209155" data-post-id="209155">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>After updating to webpack 5, this seems to work:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode=development",
      "--watch",
      "--watch-options-stdin",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
</code></pre>
<p>Edit: Also, don’t forget to set <code>NODE_ENV=development</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209155" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-209155" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209155"
                     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="209169" data-post-id="209169">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve summarized my notes from switching to <code>@tailwindcss/jit</code> in a blog post if anyone’s curious - <a href="https://arathunku.com/b/2021/test-driving-tailwindcss-jit/" class="inline-onebox" rel="noopener nofollow ugc">@arathunku - Test driving @tailwindcss/jit. SPOILER: It's great</a></p>
<p>In dev.exs, I’m using:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  yarn: ["run", "dev:watch", cd: Path.expand("../assets", __DIR__)]
</code></pre>
<p>I prefer to have all flags inside 1 single command in <code>package.json</code></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209169" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-209169" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209169"
                     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="209357" data-post-id="209357">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just create a post about related topic <a href="https://forum.elixirforum.com/t/share-an-alternative-assets-dir-for-phoenix/38751" class="inline-onebox" rel="nofollow">Share an alternative `assets` dir for Phoenix</a>.</p>
<p>It provides a complete example integrating TailwindCSS with Phoenix. I hope it will be useful to you.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209357" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-209357" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209357"
                     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="209635" data-post-id="209635">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Tailwind 2.1.0 is out, includes jit. I switched an existing webpack 4 project to it and it just worked, more or less (I found that I had forgotten to put my custom classes in layers).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209635" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-209635" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209635"
                     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="209677" data-post-id="209677">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Using webpack v4 + tailwind 2.1.1, I find that with <code>mode: 'jit'</code>, every new class that I add keeps accumulating to the CSS bundle size even though it’s not being used​<img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"><br>
Eg.</p>
<ol>
<li>using <code>text-green-200</code> → Filesize 10kb</li>
<li>using <code>text-green-200</code> &amp; <code>text-blue-300</code> → Filesize 10.1kb</li>
<li>using <code>text-green-200</code> &amp; <code>text-red-400</code>(replacing the previous blue)-&gt; Filesize 10.2kb</li>
<li>using <code>text-green-200</code> &amp; <code>text-purple-300</code>(replacing the previous red, hence only green and purple being used)-&gt; Filesize 10.3kb</li>
<li>Restart server + using <code>text-green-200</code> &amp; <code>text-purple-300</code> —&gt; Back to 10.1kb</li>
</ol>
<p>Did you encounter this behavior as well? If so, does it change with webpack 5?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209677" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-209677" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209677"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-solved cat-solved" title="Marked as solution"></div>
  </section>
</div>
    <div class="postbit" id="209751" data-post-id="209751">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes, I did encounter this behavior as well. And, it doesn’t change with Webpack 5.</p>
<p>My process of debugging:</p>
<ol>
<li>applied <code>text-green-200</code></li>
<li>changed <code>text-green-200</code> to <code>text-blue-200</code>, then checked the css file, I found the <code>text-green-200</code> was still in the file, along with the <code>text-blue-200</code></li>
</ol>
<p>It seems that used classes will not be trimmed. I had to restart the webpack to solve this problem.</p>
<blockquote>
<p>I think this has little impact on the production environment. Because you always rerun webpack to compile CSS.</p>
</blockquote> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="209751" 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/using-the-tailwindcss-jit-compiler-with-phoenix/38531/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-209751" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="209751"
                     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/38531/load_more?page=3">Load more posts (3 remaining)</a>
</div></template></turbo-stream>