Astro Integration System (#2820)

* update examples

* add initial integrations

* update tests

* update astro

* update ci

* get final tests working

* update injectelement todo

* update ben code review

* respond to final code review feedback

1 files changed, 31 insertions, 0 deletions

diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
new file mode 100644
index 000000000..30905f9d1
--- /dev/null
+++ b/packages/integrations/tailwind/src/index.ts
@@ -0,0 +1,31 @@
+import type { AstroIntegration } from 'astro';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import tailwindPlugin from 'tailwindcss';
+import autoprefixerPlugin from 'autoprefixer';
+
+function getDefaultTailwindConfig(srcUrl: URL) {
+	return {
+		theme: {
+			extend: {},
+		},
+		plugins: [],
+		content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
+	};
+}
+
+export default function (): AstroIntegration {
+	return {
+		name: '@astrojs/tailwind',
+		hooks: {
+			'astro:config:setup': ({ config, injectScript }) => {
+				// Inject the Tailwind postcss plugin
+				config.styleOptions.postcss.plugins.push(tailwindPlugin(getDefaultTailwindConfig(config.src)));
+				config.styleOptions.postcss.plugins.push(autoprefixerPlugin);
+
+				// Inject the Tailwind base import
+				injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`);
+			},
+		},
+	};
+}