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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="anuras" data-post="44" 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/anuras/48/25503_2.png" class="avatar"> anuras:</div>
<blockquote>
<p>Just wanted to mention <a href="https://flowbite.com/" rel="noopener nofollow ugc">Flowbite</a> here, which is basically an open version of TailwindUI. I find it helpful in jumpstarting my initial designs.</p>
</blockquote>
</aside>
<p>Does not seem (too) open to me.<br>
<a href="https://flowbite.com/license/" rel="noopener nofollow ugc">https://flowbite.com/license/</a></p>
<blockquote>
<p>You cannot:</p>
<ul>
<li>Use the download files to create End Products that are designed to allow an End User to build their own End Products using the download files or derivatives of the download files.</li>
<li>Re-distribute the download files or derivatives of the download files separately from an End Product, neither in code or as design assets.</li>
<li>Share your access to the download files with any other individuals</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="243558" 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/45">Post #44</a>
	                </div>
	            </div>
              <div id="likers-container-243558" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243558"
                     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 #44"></div>
  </section>
</div>
    <div class="postbit" id="243560" data-post-id="243560">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I guess depends on your definition <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<blockquote>
<p>In simple terms, use FlowBite for anything you like except for projects that compete with FlowBite and would have a negative impact on our product sales</p>
</blockquote>
<p>This is good enough for any of my use cases.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="243560" 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/46">Post #45</a>
	                </div>
	            </div>
              <div id="likers-container-243560" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243560"
                     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 #45"></div>
  </section>
</div>
    <div class="postbit" id="243591" data-post-id="243591">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Seems like the standard version of Flowbite is free software</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://flowbite.com/docs/getting-started/license/">
  <header class="source">
      <img src="https://flowbite.com/docs/android-icon-192x192.png" class="site-icon" alt="" width="192" height="192">

      <a href="https://flowbite.com/docs/getting-started/license/" target="_blank" rel="noopener nofollow ugc">flowbite.com</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/345;"><img src="https://flowbite.com/docs/images/og-image.png" class="thumbnail" alt="" width="690" height="345"></div>

<h3><a href="https://flowbite.com/docs/getting-started/license/" target="_blank" rel="noopener nofollow ugc">Flowbite - License</a></h3>

  <p>Learn more about the licensing terms for Flowbite and Tailwind CSS</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>The pro-version is not.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="243591" 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/47">Post #46</a>
	                </div>
	            </div>
              <div id="likers-container-243591" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243591"
                     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 #46"></div>
  </section>
</div>
    <div class="postbit" id="243609" data-post-id="243609">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>If you like Flowbite then have look at <a href="https://daisyui.com" rel="noopener nofollow ugc">daisyUI</a>. daisyUI is less “verbose” and has many similar components. <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" 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="243609" 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/48">Post #47</a>
	                </div>
	            </div>
              <div id="likers-container-243609" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243609"
                     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 #47"></div>
  </section>
</div>
    <div class="postbit" id="243619" data-post-id="243619">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think I saw that Surface uses DaisyUI?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="243619" 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/49">Post #48</a>
	                </div>
	            </div>
              <div id="likers-container-243619" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243619"
                     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 #48"></div>
  </section>
</div>
    <div class="postbit" id="243683" data-post-id="243683">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You might be referring to this issue, <a href="https://github.com/surface-ui/surface_catalogue/issues/20" rel="noopener nofollow ugc">Replace Bulma with TailwindCSS</a>, posted on the <code>surface_catalogue</code> GitHub repo.</p>
<p>That issue was opened by Marlus after this <a href="https://github.com/surface-ui/surface_tailwind/issues/1" rel="noopener nofollow ugc">Initial discussion</a> took place on the <code>surface_tailwind</code> GitHub repo.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="243683" 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/50">Post #49</a>
	                </div>
	            </div>
              <div id="likers-container-243683" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="243683"
                     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 #49"></div>
  </section>
</div>
    <div class="postbit" id="247417" data-post-id="247417">
  <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>yep, Daisy is progressing quickly and when you need to you can break out into custom Tailwind CSS extravanzas</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="247417" 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/51">Post #50</a>
	                </div>
	            </div>
              <div id="likers-container-247417" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247417"
                     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 #50"></div>
  </section>
</div>
    <div class="postbit" id="247428" data-post-id="247428">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="l00ker" data-post="48" 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/l00ker/48/4095_2.png" class="avatar"> l00ker:</div>
<blockquote>
<p>If you like Flowbite then have look at <a href="https://daisyui.com" rel="noopener nofollow ugc">daisyUI </a>. daisyUI is less “verbose” and has many similar components. <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
</blockquote>
</aside>
<p>Thank you for making me aware of daisyUI.</p>
<p>I’ve tried Flowbite and, although it looks quite nice, it doesn’t feel like a real component library to me. Copy-and-paste of long component definitions with hard-coded colors into my CSS isn’t really what I want.</p>
<p>DaisyUI is a whole different league. Concise classes to style a component (e.g. <code>btn btn-primary btn-sm</code>) and use of semantic colors (primary, secondary etc.) that are resolved differently depending on the theme.</p>
<p>Exactly what I was looking for! Been playing around with it for just 10 minutes and I’m already in love <img src="https://forum.elixirforum.com/images/emoji/apple/heart.png?v=15" title=":heart:" class="emoji" alt=":heart:" 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="247428" 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/52">Post #51</a>
	                </div>
	            </div>
              <div id="likers-container-247428" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="247428"
                     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 #51"></div>
  </section>
</div>
    <div class="postbit" id="268310" data-post-id="268310">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I know this is an old thread but I like Daisy too; a basic semantic layer that you can easily customize and tweak in multiple ways, including regular Tailwind utilities.</p>
<p>I was surprised how much can be done with pure CSS, even the <a href="https://daisyui.com/components/modal/" rel="noopener nofollow ugc">modal dialog</a> has no scripting. Which might make it a little trickier to integrate into a component, I guess you’d have to bind to the state of the checkbox which controls the show/hide behaviour.</p>
<p>I am still on the fence on Tailwind in general but the core components generated by the latest <code>phx.new</code> and <code>phx.gen.live</code> in 1.7 really have me understanding it quite a lot better. The components look a bit thick with all the utility soup but the actual views are very clean, I think this combo works quite well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="268310" 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/53">Post #52</a>
	                </div>
	            </div>
              <div id="likers-container-268310" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="268310"
                     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 #52"></div>
  </section>
</div>
    <div class="postbit" id="268325" data-post-id="268325">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>even the modal dialog 4 has no scripting.</p>
</blockquote>
<p>For a proper modal dialog you need to capture focus inside the modal. So that tabbing between elements stays only inside the dialog. Other wise keyboard navigation and accessibility is broken.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="268325" 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/54">Post #53</a>
	                </div>
	            </div>
              <div id="likers-container-268325" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="268325"
                     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 #53"></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=6">Load more posts (4 remaining)</a>
</div></template></turbo-stream>