Separate Tailwind v4 Bundles

In my Rails monolith, I have an app with two entrypoints, one for the dashboard (“app”) and another for the front-facing side (“consumer”). In Tailwind version 3, you can set up two separate configs and import them for Tailwind to know which content (“files”) it should scan as it bundles the output.

In Tailwind v4, we no longer need a config file, so to do this without a config, you can simply set a @source tag for the content you want Tailwind to scan for the output.


Version 3

App

@config "../tailwind-app.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

Consumer

@config "../tailwind-consumer.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;


Version 4

App

@import "tailwindcss" source(none);

@source "../../views/layouts/application.html.erb";
@source "../../views/app/*.html.erb";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Consumer

@import "tailwindcss" source(none);

@source "../../views/layouts/consumer.html.erb";
@source "../../views/consumer/*.html.erb";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";