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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hectorperez" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/120/27441_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hectorperez
                    <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><a class="mention" href="/u/thiagomajesk" rel="nofollow">@thiagomajesk</a> do you mean the following?</p>
<p>package.json</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  ...
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css; cd .. &amp;&amp; mix assets.deploy &amp;&amp; rm -f _build/esbuild"
  }
</code></pre>
<p>config.exs</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" =&gt; Path.expand("../deps", __DIR__)}
  ]
</code></pre>
<p>In <code>dev.exs</code> I have some watchers that shouldn’t change it:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :wikir, WikirWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
</code></pre>
<p>Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241616" 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/custom-css-not-replacing-tailwind-css-preflight/45710/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-241616" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241616"
                     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="241617" data-post-id="241617">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hectorperez" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/120/27441_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hectorperez
                    <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>By the way, konsalex <a href="https://github.com/tailwindlabs/tailwindcss/issues/6602#issuecomment-1029161314" rel="noopener nofollow ugc">here</a> recommended me disable preflight and add preflight’s <a href="https://unpkg.com/tailwindcss@3.0.18/src/css/preflight.css" rel="noopener nofollow ugc">source</a> manually without <code>background-color: transparent;</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="241617" 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/custom-css-not-replacing-tailwind-css-preflight/45710/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-241617" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241617"
                     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="241628" data-post-id="241628">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is the setup of a a project I’m working on:</p>
<p><strong>package.json scripts:</strong></p>
<pre data-code-wrap="json"><code class="lang-json">"scripts": {
    "watch": "npm-run-all --parallel watch:*",
    "deploy": "npm-run-all --parallel deploy:*",
    "watch:stylesheets": "NODE_ENV=development tailwindcss --input=css/app.css --output=../priv/static/css/app.css --postcss --watch",
    "deploy:stylesheets": "NODE_ENV=production tailwindcss --input=css/app.css --output=../priv/static/css/app.css --postcss --minify",
    "watch:static": "cpx 'static/**/*.*' '../priv/static' --verbose --watch",
    "deploy:static": "cpx 'static/**/*.*' '../priv/static' --verbose"
  },
</code></pre>
<p><strong>Esbuild config:</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :esbuild,
  version: "0.12.18",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" =&gt; Path.expand("../deps", __DIR__)}
  ]
</code></pre>
<p><strong>Watchers config:</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">watchers: [
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
  ]
</code></pre>
<p><strong>Deploy task:</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">"assets.deploy": [
        "esbuild default --minify",
        "cmd --cd assets npm run deploy",
        "phx.digest"
      ]
</code></pre>
<p>Test this setup and see if it helps. One of the main differences from my setup is that I’m still storing everything on “/assets” and then copying to “priv/static”.</p>
<p><a class="mention" href="/u/hectorperez" rel="nofollow">@hectorperez</a> BTW, now that I’m recalling I had a similar problem with styles inside directives not getting picked up properly. I can’t repro it right now, but this would definitely be a subject to report on the Tailwind CSS repository. I think since V3 is using Jit as default, no styles are generated at all if they can’t be found, perhaps there’s a thread to pull there.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241628" 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/custom-css-not-replacing-tailwind-css-preflight/45710/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-241628" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241628"
                     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="241809" data-post-id="241809">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey <a class="mention" href="/u/hectorperez" rel="nofollow">@hectorperez</a>, I might have found another thing you can try… I’ve upgraded my deps to the latest Tailwindcss version which seems to have fixed the issue I had before with <code>@apply</code>: <a href="https://github.com/tailwindlabs/tailwindcss/pull/7232" class="inline-onebox" rel="noopener nofollow ugc">Fix `@apply` order regression (in `addComponents`, `addUtilities`, ...) by RobinMalfait · Pull Request #7232 · tailwindlabs/tailwindcss · GitHub</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="241809" 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/custom-css-not-replacing-tailwind-css-preflight/45710/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-241809" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241809"
                     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="241833" data-post-id="241833">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hectorperez" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/120/27441_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hectorperez
                    <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>Hi <a class="mention" href="/u/thiagomajesk" rel="nofollow">@thiagomajesk</a>, thank you for your messages.</p>
<p>I tried your setup — and Tailwind CSS last version — and it’s still not working.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="241833" 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/custom-css-not-replacing-tailwind-css-preflight/45710/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-241833" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241833"
                     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="241851" data-post-id="241851">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey <a class="mention" href="/u/hectorperez" rel="nofollow">@hectorperez</a>, After publishing my previous comment I noticed a couple of issues with your configuration, for example using the <code>jit</code> and <code>purge</code> options that don’t exist in TailwindCSS V3 anymore. The correct configuration key for that is <code>content</code>. I also made a small repro for you to try which works properly: <a href="https://github.com/thiagomajesk/tailwind-repro" rel="noopener nofollow ugc">https://github.com/thiagomajesk/tailwind-repro</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="241851" 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/custom-css-not-replacing-tailwind-css-preflight/45710/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-241851" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="241851"
                     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="242065" data-post-id="242065">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hectorperez" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/120/27441_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hectorperez
                    <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>Hi <a class="mention" href="/u/thiagomajesk" rel="nofollow">@thiagomajesk</a>, thank you, your repo works!</p>
<p>However, it seems my app has a conflict or something that prevents it from working.</p>
<p>I replaced <code>jit</code> and <code>purge</code> with <code>content</code> and updated some libraries to the versions of your repo but it still doesn’t work in my app.</p>
<p>These are my files now. Maybe I missed something:</p>
<p>app.css</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./custom.css";
</code></pre>
<p>custom.css</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">@layer base {
  button {
    @apply bg-blue-500 hover:bg-blue-300;
  }
}
</code></pre>
<p>config</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :esbuild,
  version: "0.14.0",
  default: [
    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" =&gt; Path.expand("../deps", __DIR__)}
  ]
</code></pre>
<p>postcss.config.js</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss": {},
    "autoprefixer": {},
  },
}
</code></pre>
<p>tailwind.config.js</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">module.exports = {
  content: [
    "./js/**/*.js",
    "./css/**/*.*css",
    "../lib/*_web/**/*.*ex"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
</code></pre>
<p>dev.exs</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :whatever, WhateverWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
  ]
</code></pre>
<p>package.json</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{
  "private": "true",
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.6",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^3.0.18",
    "alpinejs": "^3.4.2",
    "topbar": "^0.1.3"
  },
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css; cd .. &amp;&amp; mix assets.deploy &amp;&amp; rm -f _build/esbuild",
    "watch": "NODE_ENV=development tailwindcss --input=css/app.css --output=../priv/static/assets/app.css --postcss --watch"
  }
}
</code></pre>
<p>I also updated <code>esbuild</code> to <code>~&gt; 0.3</code> in <code>mix.exs</code></p>
<p>Thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242065" 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/custom-css-not-replacing-tailwind-css-preflight/45710/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-242065" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242065"
                     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="242091" data-post-id="242091">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Have you tried diffing both projects to spot the differences? I think the repro shows that replacing the preflight defaults is indeed possible, so there’s no problem with Phoenix or Tailwind CSS setup.<br>
So, if the repro works and your app still doesn’t, check that everything is properly configured and that should be it. Unfortunately, there’s not much I can do to help you further than that, sorry <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" 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="242091" 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/custom-css-not-replacing-tailwind-css-preflight/45710/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-242091" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242091"
                     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="242273" data-post-id="242273">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hectorperez" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hectorperez/120/27441_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hectorperez
                    <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><a class="mention" href="/u/thiagomajesk" rel="nofollow">@thiagomajesk</a> I’ve tried diffing individual a few files.</p>
<p>Don’t worry, I’ll investigate a bit more and if I don’t find why it’s failing I’ll do [1] for now.<br>
Thank you for all your help!</p>
<p>[1]</p>
<aside class="quote no-group" data-username="hectorperez" data-post="13" data-topic="45710" 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/hectorperez/48/27441_2.png" class="avatar"> hectorperez:</div>
<blockquote>
<p>By the way, konsalex <a href="https://github.com/tailwindlabs/tailwindcss/issues/6602#issuecomment-1029161314" rel="noopener nofollow ugc">here</a> recommended me disable preflight and add preflight’s <a href="https://unpkg.com/tailwindcss@3.0.18/src/css/preflight.css" rel="noopener nofollow ugc">source</a> manually without <code>background-color: transparent;</code></p>
</blockquote>
</aside> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242273" 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/custom-css-not-replacing-tailwind-css-preflight/45710/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-242273" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242273"
                     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="245947" data-post-id="245947">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/hectorperez" rel="nofollow">@hectorperez</a> did you find anything for solving the issue, i am having the same issue <img src="https://forum.elixirforum.com/images/emoji/apple/frowning.png?v=15" title=":frowning:" class="emoji" alt=":frowning:" 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="245947" 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/custom-css-not-replacing-tailwind-css-preflight/45710/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-245947" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="245947"
                     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/45710/load_more?page=3">Load more posts (3 remaining)</a>
</div></template></turbo-stream>