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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tadasajon" data-post="9" data-topic="43331" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tadasajon/48/23216_2.png" class="avatar"> tadasajon:</div>
<blockquote>
<p>It seems that the missing link for me was not understanding that Tailwind is not meant to be used directly, but is rather meant to be used by specialized people who build CSS UI frameworks like Bootstrap and Daisy UI etc and then actual app developers just use those.</p>
</blockquote>
</aside>
<p>This is not true for me. I’m not in the business of building frameworks and I find Tailwind really better. If CSS is the assembler, then Tailwind is the C programming language. At the end of the day you still work with the same box model, etc, but it makes me go faster. I find myself looking at the Tailwind docs even if I’m not using Tailwind - <a href="https://tailwindcss.com/docs/text-overflow#truncate" rel="noopener nofollow ugc"><code>truncate</code></a> would be a great example.</p>
<p>The other benefit of Tailwind is that it’s bringing a design system with it. So no more figuring out the px size of a font (“infinite” possibilites), just pick one of <code>xs</code>, <code>sm</code>, <code>base</code>, <code>lg</code>, <code>xl</code>, <code>2xl</code>, etc. Same goes for colors. A tip from their <a href="https://www.refactoringui.com/" rel="noopener nofollow ugc">Rafactoring UI book</a> - consider building your app in grayscale and only add color later. Again, Tailwind brings 10 shades of gray, and by limiting options makes things easier.</p>
<p>The moment when I fell in love with Tailwind was when I was able to recreate a designer-made modal dialog from their book in the <a href="https://play.tailwindcss.com/" rel="noopener nofollow ugc">Tailwind playground</a> in minutes, which was a feat considering my limited CSS skills. It felt like Tailwind gave me superpowers. Of course the modal in the book was made using the same design system that is embedded into Tailwind, but my previous statement still holds true.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229861" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-229861" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229861"
                     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="229865" data-post-id="229865">
  <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="stefanchrobot" data-post="14" data-topic="43331">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/stefanchrobot/48/7657_2.png" class="avatar"> stefanchrobot:</div>
<blockquote>
<p>I’m not in the business of building frameworks and I find Tailwind really better. If CSS is the assembler, then Tailwind is the C programming language.</p>
</blockquote>
</aside>
<p>That’s a really great analogy. Tailwind is neither “do it all manually” aka in plain css, nor is is a component library like bootstrap, which supplies styling for html element + custom component.</p>
<p>The issue with plain css is how hard it is to get right, which imo includes the flexibility to adjust to (continuous) change in a project. Also it might look like inline styles are close to tailwind, but it couldn’t be different.</p>
<p>Frameworks like bootstrap are great if you want to hit the ground running and it provides everything you need, but boy is it a pain to extend or use for non supported components. Milligram also sits in that space of styling html elements, but comes with less custom stuff.</p>
<p>Tailwind (as well as other utility css frameworks) sits in between those approaches. It abstracts common pains of plain css like reusability, constant context switching, sizing fragmentation, flexibility, … but the styling of html elements / components is up to the user of the framework. No need to fight the framework to let something look a certain way.</p>
<p>Which one is more useful imo depends on the goal</p>
<ul>
<li>Want to or need to be fully in charge how things look and are architected → Plain CSS</li>
<li>Want to or need to be fully in charge how things look → Tailwind</li>
<li>Looking for a neat looking set of predefined styling for html / components → Bootstrap/Milligram/Tailwind UI</li>
<li>Looking for not just predefined components, but also sections or whole pages → Themes</li>
</ul>
<p>This is a rough categorisation. Often tools sit in between those categories. E.g. latest bootstrap also has a few utility functions, but also there are bootstrap “themes”; Tailwind UI still has Tailwind beneigh;</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229865" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-229865" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229865"
                     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="229883" data-post-id="229883">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m not very good at css, but, why would you use space-x-n instead of the native css grid <code>column-gap</code>?</p>
<p>EDIT: as soon as I commented I answered myself, you can use it on non grid stuff right?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229883" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-229883" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229883"
                     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="229885" data-post-id="229885">
  <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="cpgo" data-post="16" data-topic="43331">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cpgo/48/25792_2.png" class="avatar"> cpgo:</div>
<blockquote>
<p>I’m not very good at css, but, why would you use space-x-n instead of the native css grid <code>column-gap</code>?</p>
</blockquote>
</aside>
<p><code>.space-x-n</code> might just as well use css grid (it doesn’t). That’s not the point behind tailwind css. Yes you can do everything tailwind does with plain css. The benefits are not in which css you can apply, but in everything else around it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229885" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-229885" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229885"
                     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="229965" data-post-id="229965">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes, <code>space-x-n</code> and <code>space-y-n</code> help make spacing your <code>&lt;div&gt;</code>s super nice. For example:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;div class="space-x-1"&gt;
  &lt;div&gt;This div&lt;/div&gt;
  &lt;div&gt; and this div&lt;/div&gt;
  &lt;div&gt; and this div are now all evenly spaced between them&lt;/div&gt;
  &lt;div&gt; on the x (this one too).&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>It’s a huge productivity booster once you familiarize yourself with how it works.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="229965" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-229965" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="229965"
                     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="230090" data-post-id="230090">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I don’t want the license restrictions of TailwindUI and so ended up using Daisy also.</p>
<p>It’s not perfect, but it creates a bunch of sane and succinct default components AND the flexibility of verbose Tailwind CSS</p>
<p>I am also using Bulma, which is awesome.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230090" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-230090" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230090"
                     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="230140" data-post-id="230140">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tadasajon" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tadasajon/120/23216_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tadasajon
                    <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>I was actually interested enough in Tailwind UI that I spent the $150 for a license to use it.  But then I began collaborating with someone on the project I’m working on and the license now wants me to pony up another $650 because it’s not just me using it anymore.  That’s a lot of money for me, I’m afraid.</p>
<p>So now I just have a useless $150 Tailwind UI license that I can’t use for any project that I’m interested enough in to collaborate with someone on.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230140" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-230140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230140"
                     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="230143" data-post-id="230143">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think you’re still good if you split the work: the other people do barebones pages and you “upgrade” the views with TailwindUI components.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230143" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-230143" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230143"
                     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>
    <div class="postbit" id="230148" data-post-id="230148">
  <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>Does anyone really find <a href="https://tailwindcss.com/docs/utility-first" rel="noopener nofollow ugc">that example</a> convincing that TailwindCSS is useful? Really?</p>
<p>From all the CSS frameworks out there the most convincing for me (as a mostly backend guy) was Semantic UI and I was pleased to find that <a href="https://fomantic-ui.com" rel="noopener nofollow ugc">it has been revived by community</a>. I still prefer to write my own CSS instead of using “inline-CSS-as-a-library-that-tries-to-convince-you-that-it-is-not-inline-CSS” where I can use semantically meaningful names in the HTML code. With small amount of CSS code in most cases you can achieve most of that, and in many cases IMHO it will be easier to maintain.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230148" data-batch-url="/posts/batch_likers">
                        5
                      </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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-230148" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230148"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="230152" data-post-id="230152">
  <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>Did you just look at the example? Because right after explaining the example it goes on to say</p>
<blockquote>
<p>Now I know what you’re thinking, <em>“this is an atrocity, what a horrible mess!”</em> and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — <strong>you have to actually try it</strong> .</p>
</blockquote>
<p>I’ve never been great at css in any form, but learning tailwind I’ve definitely come to appreciate it. You definitely need to combine tailwind with some sort of templating system to give you components, but Phoenix has this built in with the new heex stuff.</p>
<p>After working with it, I genuinely believe in all of the benefits that they list:</p>
<blockquote>
<ul>
<li><strong>You aren’t wasting energy inventing class names</strong>. No more adding silly class names like <code>sidebar-inner-wrapper</code> just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.</li>
<li><strong>Your CSS stops growing</strong>. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.</li>
<li><strong>Making changes feels safer</strong>. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.</li>
</ul>
</blockquote> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230152" 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/why-am-i-only-now-learning-about-milligram-it-is-included-by-default-why-the-tailwind-hype/43331/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-230152" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230152"
                     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 #22"></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/43331/load_more?page=3">Load more posts (34 remaining)</a>
</div></template></turbo-stream>