Disable automatic source detection when use @tailwind utilities

[rozsazoltan]

Although the documentation addresses what happens if I don't use @import "tailwindcss";:

• https://tailwindcss.com/docs/preflight#disabling-preflight

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

@import cannot be used embedded - to achieve a behavior similar to the v3 important strategy - which is why I use @tailwind utilities;. The documentation doesn't cover this, but is this the correct usage in this case?

• https://v3.tailwindcss.com/docs/configuration#selector-strategy (v3)
• Tailwind v4 has no `important` option support #15866 (comment) (v4)

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* For disable Preflight just don't import preflight.css */
/* See more: https://tailwindcss.com/docs/preflight#disabling-preflight */
/* @import "tailwindcss/preflight.css" layer(base); */

@custom-variant dark (&:where(.dark, .dark *));
@source "./../../../resources/views/livewire/pulse/top-sellers.blade.php";

@theme {
  /* ... */
}

@layer utilities {
  #top-sellers {
    @tailwind utilities source(none); /* HERE */
  }
}

[julienborgeon]

Hey!

From what I understand about Tailwind v4, source(none) on @tailwind utilities does seem to be a valid way to turn off automatic source detection - but it basically means Tailwind will only pick up classes from the paths you explicitly define with @source. Without that, the utilities layer could end up empty.

So something like:

@layer theme, base, components, utilities;

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

@source "./../../../resources/views/livewire/pulse/top-sellers.blade.php";

@theme {
  /* ... */
}

@layer utilities {
  #top-sellers {
    @tailwind utilities;
  }
}

might be closer to the intended pattern, especially if you're already disabling Preflight (by not importing it).

I haven’t seen official guidance that says "this is the one correct way," but the general idea seems to be:

• source(none) disables auto-detection
• @source tells Tailwind what to scan instead
• scoping inside a selector can mimic the old "important" strategy

If Tailwind publishes a clearer recommendation, it might confirm whether this approach is the best fit - but it looks consistent with how v4 handles sources so far.

[rozsazoltan]

I managed to get to testing; I thought someone would have the solution off the cuff.

So, source(none) works perfectly, just as I expected.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* For disable Preflight just don't import preflight.css */
/* See more: https://tailwindcss.com/docs/preflight#disabling-preflight */
/* @import "tailwindcss/preflight.css" layer(base); */

@custom-variant dark (&:where(.dark, .dark *));
@source "./../../../resources/views/livewire/pulse/top-sellers.blade.php";

@theme {
  /* ... */
}

@layer utilities {
  #top-sellers {
    @tailwind utilities source(none); /* HERE */
  }
}

Additionally, I found that this syntax isn't necessary - @import works as well.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
/* For disable Preflight just don't import preflight.css */
/* See more: https://tailwindcss.com/docs/preflight#disabling-preflight */
/* @import "tailwindcss/preflight.css" layer(base); */

@custom-variant dark (&:where(.dark, .dark *));
@source "./../../../resources/views/livewire/pulse/top-sellers.blade.php";

@theme {
  /* ... */
}

#top-sellers {
  @import "tailwindcss/utilities.css" layer(utilities) source(none);
}

References:

• [12.x] Updating the Pulse Card TailwindCSS v3 configuration to TailwindCSS v4 laravel/docs#10926 (comment)
• Tailwind v4 has no `important` option support #15866 (comment)
• https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection
• https://tailwindcss.com/docs/preflight#disabling-preflight