Allows projects to opt out of the base Tailwind styles (#2959)

* adding an option to opt-out of the Tailwind base styles

* chore: adding changeset description

.changeset/tasty-zoos-wink.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': patch
+---
+
+Adds an option to opt-out of the default base styles for the Tailwind integration

packages/integrations/tailwind/README.md

@@ -82,6 +82,19 @@ export default {
 }
 ```
 
+We will include `@tailwind` directives for each of Tailwind's layers to enable Tailwind styles by default. If you need to customize this behavior, with Tailwind's [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer) for example, opt-out via the `config.applyBaseStyles` integration option:
+
+__astro.config.mjs__
+
+```js
+export default {
+  // ...
+  integrations: [tailwind({
+    config: { applyBaseStyles: false },
+  })],
+}
+```
+
 You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

packages/integrations/tailwind/src/index.ts

@@ -43,12 +43,21 @@ type TailwindOptions =
 				 * @default true
 				 */
 				applyAstroPreset?: boolean;
+				/**
+				 * Apply Tailwind's base styles
+				 * Disabling this is useful when further customization of Tailwind styles
+				 * and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
+				 * for more details on directives and customization.
+				 * @default: true
+				 */
+				applyBaseStyles?: boolean;
 			};
 	  }
 	| undefined;
 
 export default function tailwindIntegration(options: TailwindOptions): AstroIntegration {
 	const applyAstroConfigPreset = options?.config?.applyAstroPreset ?? true;
+	const applyBaseStyles = options?.config?.applyBaseStyles ?? true;
 	const customConfigPath = options?.config?.path;
 	return {
 		name: '@astrojs/tailwind',
@@ -71,8 +80,10 @@ export default function tailwindIntegration(options: TailwindOptions): AstroInte
 				config.styleOptions.postcss.plugins.push(tailwindPlugin(tailwindConfig));
 				config.styleOptions.postcss.plugins.push(autoprefixerPlugin);
 
-				// Inject the Tailwind base import
-				injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`);
+				if (applyBaseStyles) {
+					// Inject the Tailwind base import
+					injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`);
+				}
 			},
 		},
 	};