Disable automatic source detection when use `@tailwind utilities`

Question

With shorthand import, this is easy:

@import "tailwindcss" source(none);

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.

Selector strategy with important property in TailwindCS v3
With the removal of the important property, what is the alternative selector strategy in TailwindCSS 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; /* HERE */
  }
}

I can't find a solution for how to enforce source(none) if I use @tailwind utilities inside nested CSS (instead of @import "tailwindcss/utilities.css"). How can automatic source detection be disabled in this configuration case?

rozsazoltan · Accepted Answer · 2025-11-26 08:37:00Z

Yes, I tested it. source(none), although undocumented, also works with @tailwind utilities.

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

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

@tailwind utilities is basically a leftover from v3 and is no longer recommended for use. Instead, @import "tailwindcss/utilities.css" also works, but in this case, placing it into a layer must be done during the import, like this:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

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

Don't forget that by disabling automatic source detection, you have to declare every source yourself using the @source directive (known as content in v3).

Collectives™ on Stack Overflow

Disable automatic source detection when use `@tailwind utilities`

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related