diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md
index f3c88a5af..6bc775edd 100644
--- a/docs/src/pages/guides/styling.md
+++ b/docs/src/pages/guides/styling.md
@@ -211,8 +211,7 @@ And create 2 files in your project root: `tailwind.config.cjs` and `postcss.conf
 ```js
 // tailwind.config.cjs
 module.exports = {
-  mode: 'jit',
-  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}'],
+  content: ['./public/**/*.html', './src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}'],
   // more options here
 };
 ```
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index edd6027d2..b00237f8c 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -11,6 +11,6 @@
   "devDependencies": {
     "astro": "^0.21.12",
     "autoprefixer": "^10.4.0",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.0.5"
   }
 }
diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js
index d9b35bc31..627a00ab2 100644
--- a/examples/with-tailwindcss/tailwind.config.js
+++ b/examples/with-tailwindcss/tailwind.config.js
@@ -1,4 +1,3 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
+  content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
 };