From 226822cbbf0b04288a60d05977e7f74fa4698e9e Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Fri, 1 Apr 2022 13:45:43 +0000
Subject: [PATCH] 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               |  5 +++++
 packages/integrations/tailwind/README.md    | 13 +++++++++++++
 packages/integrations/tailwind/src/index.ts | 15 +++++++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tasty-zoos-wink.md

diff --git a/.changeset/tasty-zoos-wink.md b/.changeset/tasty-zoos-wink.md
new file mode 100644
index 000000000..1b144f9c0
--- /dev/null
+++ b/.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
diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index 1cf730f7a..d0ab7d97d 100644
--- a/packages/integrations/tailwind/README.md
+++ b/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/
diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
index bb5a4ade3..3bdd65011 100644
--- a/packages/integrations/tailwind/src/index.ts
+++ b/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';`);
+				}
 			},
 		},
 	};