Hi. Recently, I’ve been building a page builder in Phoenix that runs in the runtime environment and actively accepts Tailwind code (Runtime compiling module and assets).
I’ve recently been working on implementing a system that allows me to merge the Tailwind CSS classes generated at build time with additional CSS classes generated at runtime using the Tailwind binary. (I am using Tailwind 4)
Unfortunately, the issue I’m facing is CSS duplication in my source code, which increases the overall size of the output.
In the development environment, the source code is fully accessible, and Tailwind can easily rescan the modules and transfer all the classes into the CSS file. However, after building the Phoenix project’s release, this capability is no longer available (or maybe i do not know how can scan the html part in production mode).
Now, based on the approach used by Beacon, I store the modules that I dynamically create at runtime in a .template text file and pass them to the Tailwind CLI. Tailwind then processes and compiles the CSS accordingly.
Everything works, but the only issue is that we also need the CSS that was originally compiled into Phoenix’s app.css during compile time and placed in the priv directory. Since both include Tailwind imports, we end up with a lot of duplicated styles.
What do you suggest?
This is simple Tailwind module that I use with Phoenix 1.8 and Tailwind 4
Gist: tailwind_compiler.ex · GitHub
defmodule MishkaCms.Runtime.Compilers.TailwindCompiler do @moduledoc """ Production-ready Tailwind 4 compiler for runtime CSS generation. Creates sample templates and compiles them to CSS using Tailwind CLI. """ require Logger @doc """ Compiles Tailwind CSS from hardcoded templates. Returns {:ok, css} or {:error, reason} """ def compile do # Use :code.priv_dir for production compatibility tmp_dir = get_temp_dir() # Ensure directory exists (important for releases) _ = File.mkdir_p(tmp_dir) try do # Generate sample template files _ = generate_sample_templates!(tmp_dir) # Run Tailwind compilation output_css = execute_tailwind() {:ok, output_css} rescue e -> {:error, Exception.message(e)} after # Cleanup templates but keep the directory cleanup_templates(tmp_dir) end end defp get_temp_dir do # In production/release: uses the app's priv directory # In development: falls back to relative path case :code.priv_dir(:mishka_cms) do {:error, _} -> Path.join(["priv", "static", "temp"]) priv_dir -> Path.join([priv_dir, "static", "temp"]) end end defp generate_sample_templates!(tmp_dir) do templates = [ {"sample_1.template", """ <div> <h1 id="header1" class="text-center w-full bg-gray-200 p-4 border border-gray-300 rounded-md shadow-md"> <%= @page_data.page.title %> </h1> <p class="mishka-test">Count: <%= @page_data.extra.count || 0 %></p> <br /> <button phx-click={JS.toggle_class("text-red-500", to: "#header1")} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > Change Color </button> </div> """} # {"sample_2.template", # """ # <nav class="bg-gray-800 p-4"> # <div class="flex items-center justify-between"> # <span class="text-white text-xl font-semibold">My App</span> # <div class="flex space-x-4"> # <a href="#" class="text-gray-300 hover:text-white transition-colors">Home</a> # <a href="#" class="text-gray-300 hover:text-white transition-colors">About</a> # <a href="#" class="text-gray-300 hover:text-white transition-colors">Contact</a> # </div> # </div> # </nav> # """}, # {"sample_3.template", # """ # <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-6"> # <div class="bg-white rounded-lg shadow-md p-6"> # <h2 class="text-xl font-semibold mb-2">Card Title</h2> # <p class="text-gray-600">Card content goes here.</p> # </div> # <div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg p-6"> # <h2 class="text-xl font-semibold mb-2">Gradient Card</h2> # <p>Another card with gradient background.</p> # </div> # </div> # """}, # {"sample_4.template", # """ # <form class="max-w-md mx-auto mt-8 space-y-4"> # <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your name"> # <textarea class="w-full px-4 py-2 border border-gray-300 rounded-md resize-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Your message"></textarea> # <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors"> # Submit # </button> # </form> # """} ] Enum.map(templates, fn {filename, content} -> filepath = Path.join(tmp_dir, filename) File.write!(filepath, content) filepath end) end defp execute_tailwind do # Create temporary input CSS file with dynamic content timestamp = :os.system_time(:millisecond) input_css_path = Path.join(System.tmp_dir!(), "tailwind_input_#{timestamp}.css") output_css_path = Path.join(System.tmp_dir!(), "tailwind_output_#{timestamp}.css") # Write CSS to temporary file _ = File.write!(input_css_path, build_css_content()) try do # Check if Tailwind binary exists, install if not if !File.exists?(Tailwind.bin_path()) do Logger.info("Tailwind binary not found at #{Tailwind.bin_path()}. Installing...") Tailwind.install() end # Build arguments for Tailwind CLI # Always minify in production-ready code # args = ["--input=#{input_css_path}", "--output=#{output_css_path}", "--minify"] args = ["--input=#{input_css_path}", "--output=#{output_css_path}"] # Run Tailwind CLI case System.cmd(Tailwind.bin_path(), args, cd: File.cwd!(), stderr_to_stdout: true) do {_output, 0} -> File.read!(output_css_path) {error_output, exit_code} -> raise """ Tailwind compilation failed with exit code #{exit_code} Output: #{error_output} Tailwind path: #{Tailwind.bin_path()} Args: #{inspect(args)} """ end after # Cleanup temporary files File.rm(input_css_path) File.rm(output_css_path) end end defp cleanup_templates(tmp_dir) do case File.ls(tmp_dir) do {:ok, files} -> files |> Enum.filter(&String.ends_with?(&1, ".template")) |> Enum.each(&File.rm!(Path.join(tmp_dir, &1))) {:error, _} -> # Directory doesn't exist, nothing to clean :ok end end @doc """ Compiles and stores the CSS in ETS. Creates an ETS table if it doesn't exist. """ def compile_and_store(ets_table_name \\ :tailwind_css_cache) do # Ensure ETS table exists if :ets.info(ets_table_name) == :undefined do :ets.new(ets_table_name, [:set, :public, :named_table]) end case compile() do {:ok, css} -> :ets.insert(ets_table_name, {:compiled_css, css}) Logger.info("Tailwind CSS compiled and stored in ETS") {:ok, css} {:error, reason} = error -> Logger.error("Failed to compile Tailwind CSS: #{reason}") error end end @doc """ Retrieves compiled CSS from ETS. """ def get_compiled_css(ets_table_name \\ :tailwind_css_cache) do case :ets.lookup(ets_table_name, :compiled_css) do [{:compiled_css, css}] -> css [] -> "/* CSS not found for this site */" end end defp build_css_content do temp_dir = get_temp_dir() app_css_path = Path.join([:code.priv_dir(:mishka_cms), "static", "assets", "css", "app.css"]) _existing_css = if File.exists?(app_css_path), do: File.read!(app_css_path), else: "" """ /* Import Tailwind layers once */ @import "tailwindcss" source(none); /* Actually import your custom base app styles */ @import "#{app_css_path}"; /* Also scan app.css and templates for utility classes */ @source "#{app_css_path}"; @source "#{temp_dir}/*.template"; """ end end As you can see in the code below, if I don’t call @import "tailwindcss" source(none); again here, the styles—such as colors—won’t compile correctly at runtime. But if I do include it, I end up with duplicate CSS rules.
I place the runtime CSS in ETS and include it in root.html.
defp build_css_content do temp_dir = get_temp_dir() app_css_path = Path.join([:code.priv_dir(:mishka_cms), "static", "assets", "css", "app.css"]) _existing_css = if File.exists?(app_css_path), do: File.read!(app_css_path), else: "" """ /* Import Tailwind layers once */ @import "tailwindcss" source(none); /* Actually import your custom base app styles */ @import "#{app_css_path}"; /* Also scan app.css and templates for utility classes */ @source "#{app_css_path}"; @source "#{temp_dir}/*.template"; """ end Note: if i do not import @import "#{app_css_path}"; again here the custom css which is written by developer is not brought! and does not work
Thank you in advance