Clarify usage of source(), theme(), and prefix() with individual imports

Author: thecrypticace

src/docs/preflight.mdx

@@ -231,3 +231,50 @@ To disable Preflight, simply omit its import while keeping everything else:
 @import "tailwindcss/preflight.css" layer(base); /* [!code --] */
 @import "tailwindcss/utilities.css" layer(utilities);
 ```
+
+When importing Tailwind CSS's files individually, features like `source()`, `theme()`, `prefix()`, etc… should go on their respective imports.
+
+Source detection affects generated utilities so `source(…)` should be added to the `utilities.css` import:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) source(none);  /* [!code ++] */
+```
+
+The same goes for `important` which affects generated utilities:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities) important;  /* [!code ++] */
+```
+
+Likewise, `theme(static)`, `theme(inline)`, etc… affect generated theme variables and should be placed on the `theme.css` import:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);  /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) theme(static);  /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities);
+```
+
+Using a prefix, e.g. `prefix(tw)`, affects *both* so it should go on both imports:
+
+```css
+/* [!code filename:CSS] */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);  /* [!code --] */
+@import "tailwindcss/utilities.css" layer(utilities);  /* [!code --] */
+@import "tailwindcss/theme.css" layer(theme) prefix(tw);  /* [!code ++] */
+@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  /* [!code ++] */
+```