9 files changed, 71 insertions, 0 deletions
diff --git a/examples/with-tailwindcss/.gitignore b/examples/with-tailwindcss/.gitignore
new file mode 100644
index 000000000..d436c6dad
--- /dev/null
+++ b/examples/with-tailwindcss/.gitignore
@@ -0,0 +1,18 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+.snowpack/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/with-tailwindcss/.npmrc b/examples/with-tailwindcss/.npmrc
new file mode 100644
index 000000000..0cc653b2c
--- /dev/null
+++ b/examples/with-tailwindcss/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
+\ No newline at end of file
diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
new file mode 100644
index 000000000..20979a78f
--- /dev/null
+++ b/examples/with-tailwindcss/README.md
@@ -0,0 +1,5 @@
+# Astro with [Tailwind](https://tailwindcss.com)
+
+Astro comes with Tailwind support out of the box. This example showcases how to style your Astro project with [Tailwind](https://tailwindcss.com).
+
+For complete setup instructions, please see our [Styling Guide](https://github.com/snowpackjs/astro/blob/main/docs/styling.md#-tailwind).
diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs
new file mode 100644
index 000000000..7e6aaa3fd
--- /dev/null
+++ b/examples/with-tailwindcss/astro.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  devOptions: {
+    tailwindConfig: './tailwind.config.js',
+  },
+};
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
new file mode 100644
index 000000000..befb7afef
--- /dev/null
+++ b/examples/with-tailwindcss/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@astrojs/example-with-tailwindcss",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build"
+  },
+  "devDependencies": {
+    "tailwindcss": "^2.1.2",
+    "astro": "^0.15.1"
+  },
+  "snowpack": {
+    "workspaceRoot": "../.."
+  }
+}
diff --git a/examples/with-tailwindcss/public/global.css b/examples/with-tailwindcss/public/global.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/examples/with-tailwindcss/public/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro
new file mode 100644
index 000000000..64baa50ae
--- /dev/null
+++ b/examples/with-tailwindcss/src/components/Button.astro
@@ -0,0 +1,3 @@
+<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
+  <slot />
+</button>
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
new file mode 100644
index 000000000..00ac41dac
--- /dev/null
+++ b/examples/with-tailwindcss/src/pages/index.astro
@@ -0,0 +1,15 @@
+---
+import Button from '../components/Button.astro';
+---
+
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Astro + TailwindCSS</title>
+    <link rel="stylesheet" type="text/css" href="/global.css">
+  </head>
+
+  <body>
+    <Button>I’m a Tailwind Button!</Button>
+  </body>
+</html>
diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js
new file mode 100644
index 000000000..dc8c3ae87
--- /dev/null
+++ b/examples/with-tailwindcss/tailwind.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue,svelte}'],
+};