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

4 files changed, 86 insertions, 0 deletions

diff --git a/packages/integrations/tailwind/base.css b/packages/integrations/tailwind/base.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/integrations/tailwind/base.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json
new file mode 100644
index 000000000..99116f5c6
--- /dev/null
+++ b/packages/integrations/tailwind/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@astrojs/tailwind",
+  "description": "Tailwind + Astro Integrations",
+  "version": "0.0.1",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/integrations/tailwind"
+  },
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://astro.build",
+  "exports": {
+    ".": "./dist/index.js",
+    "./base.css": "./base.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "dev": "astro-scripts dev \"src/**/*.ts\""
+  },
+  "dependencies": {
+    "tailwindcss": "^3.0.23",
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12"
+  },
+  "devDependencies": {
+    "@types/tailwindcss": "^3.0.9",
+    "astro": "workspace:*",
+    "astro-scripts": "workspace:*"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "postcss"
+      ]
+    }
+  }
+}
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';`);
+			},
+		},
+	};
+}
diff --git a/packages/integrations/tailwind/tsconfig.json b/packages/integrations/tailwind/tsconfig.json
new file mode 100644
index 000000000..44baf375c
--- /dev/null
+++ b/packages/integrations/tailwind/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}