How to Prevent Duplicate CSS When Merging Tailwind 4 Output at Build and Runtime?

[shahryarjb]

Hi. 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.

For example, here's a snippet of the CSS that's generated at build time by Tailwind by scanning all of my non-compiled source files:

/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-300: oklch(0.808 0.114 19.571);
    --spacing: 0.25rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -0.05em;
    --radius-lg: 0.5rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    ....
  }
}
...

Now, at runtime, based on the user's request, I generate temporary files with the .template extension like this:

build_css_content() function

/* Import existing compiled CSS first */
    #{existing_css}

    /* Import Tailwind and scan template files */
    @import "tailwindcss" source(none);
    @source "#{temp_dir}/*.template";

    /* This file is for your main application CSS */

Then I pass the arguments like so: (imagine it is a JS code) i just mixed old css and new css

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")
File.write!(input_css_path, build_css_content())

args = ["--input=#{input_css_path}", "--output=#{output_css_path}"]
# it is like call ./tailwind
System.cmd(Tailwind.bin_path(), args, cd: File.cwd!(), stderr_to_stdout: true)

Here’s the problem:
If I don’t include @import "tailwindcss" source(none);, the CLI doesn’t produce any output at runtime. But when I include it, it works — except that many parts of the CSS are duplicated.

What I really need is a way to completely eliminate duplicated CSS.

Note: Since the source code is compiled (it's a compiled language), I can't scan the source files again at runtime.

What solution would you suggest?

[wongjn]

You didn't provide the source file for the build-time CSS, but presumably, if it has @import "tailwindcss"; in it as well, then you could change the runtime source to:

@import "tailwindcss/theme.css" source(none) layer(theme);
@import "tailwindcss/utilities.css" source(none) layer(utilities);

@source "#{temp_dir}/*.template";

This removes the preflight.css since presumably you already have it in the build-time CSS. Then, you could diff the two files and merge the results.

[shahryarjb]

Hi sir, thank you @wongjn

But I have problem with it

if i do this, the only css is generated for me is that you can see there is not any color of my html in runtime

/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

But my html (123.template) in runtime

<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>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>

but with this

/* Import Tailwind and scan template files */
@import "tailwindcss" source(none);
@source "#{temp_dir}/*.template";

the output of css

/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(.637 .237 25.331);--color-blue-500:oklch(.623 .214 259.815);--color-blue-700:oklch(.488 .243 264.376);--color-gray-200:oklch(.928 .006 264.531);--color-gray-300:oklch(.872 .01 258.338);--color-white:#fff;--spacing:.25rem;--font-weight-bold:700;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.w-full{width:100%}.rounded{border-radius:.25rem}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-300{border-color:var(--color-gray-300)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-200{background-color:var(--color-gray-200)}.p-4{padding:calc(var(--spacing)*4)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

[shahryarjb]

I even test it, in runtime

    /* Import Tailwind layers once */
    @import "tailwindcss" source(none);

    /* My build time css because i need it brings the custom css without it it just brings the tailwind css*/
    @import "#{app_css_path}";

    /* Also scan app.css and templates for utility classes */
    @source "#{app_css_path}";
    @source "#{temp_dir}/*.template";

But still has duplicated css

[SlavaMryasov]

@shahryarjb Hi Shahryar, did you solve this problem? I have the same problem too, please help

[shahryarjb]

@SlavaMryasov sorry 😞 I forgot how to solve it

[SlavaMryasov]

@shahryarjb
but were you still able to solve this problem?
Can you tell me if your project currently uses "@import "tailwindcss" source(none)"
I will be very grateful to you if you help me)

[shahryarjb]

@SlavaMryasov i re-check it last night, it is my elixir backend code

  defp build_css_content(site_name) do
    temp_dir = get_temp_dir()
    app_root = Application.app_dir(:mishka_cms)

    app_css_path = Path.expand("priv/static/assets/css/app.css", app_root)
    heroicons_path = Path.expand("priv/static/temp/js_assets/vendor/heroicons.js", app_root)

    # Read the app.css content if it exists, otherwise use empty string
    app_css_content =
      case File.read(app_css_path) do
        {:ok, content} ->
          Logger.debug("Reading app.css from #{app_css_path}, size: #{byte_size(content)} bytes")
          content

        {:error, _reason} ->
          Logger.warning("app.css not found at #{app_css_path}, using empty CSS")
          ""
      end

    """
    @import "tailwindcss" source(none);

    /* Scan runtime templates */
    @source "#{temp_dir}/tailwind_classes.template";
    @source "#{temp_dir}/runtime/#{site_name}/**/*.template";
    @source "#{temp_dir}/runtime/__global__/**/*.template";

    /* Scan JS/TS assets */
    @source "#{temp_dir}/js_assets/**/*.js";
    @source "#{temp_dir}/js_assets/**/*.ts";

    /* Add plugins and custom variants */
    @plugin "#{heroicons_path}";

    @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
    @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
    @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

    /* Use the data attribute for dark mode  */
    @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

    /* Make LiveView wrapper divs transparent for layout */
    [data-phx-session], [data-phx-teleported-src] { display: contents }

    /* App CSS content directly embedded */
    #{app_css_content}
    """
  end

As you see first it loads @import "tailwindcss" source(none); and after that i load the #{app_css_content} and i clean the tailwind import inside my app.css

it is my app.css for example

/* This file is for your main application CSS */
.mishka-test {
  color: green;
}

/* SortableJS styles for draggable tree nodes */
.sortable-ghost {
  opacity: 0.4;
  background: #4B5563;
}

.sortable-drag {
  opacity: 1;
}

It solves your problem?

[SlavaMryasov]

@shahryarjb thank you so much for the hint — @source did the trick!

There’s a main project and a separate UI Kit that’s built and published as an npm package.
The issue was that both the UI Kit and the main project used Tailwind 4, so each was compiling its own utilities — resulting in duplicated styles in the final build.

Solution:
Disable utility generation in the UI Kit and let the main project’s Tailwind handle class scanning.

Steps:

In the UI Kit, create a file src/tailwind-source.css with:

@source "./src/**/*.{ts,tsx}";

This tells Tailwind where to look for classes inside the library.

In vite.config.ts, add a closeBundle hook to copy this file to dist after the build.

In package.json, export it like this:

"./tailwind.css": "./dist/tailwind-source.css"

In the main project, simply import it:

@import 'library-name/tailwind.css';

Now Tailwind from the main project scans the UI Kit’s source files, finds all used classes, and generates the CSS only once — no more duplication.