Add tailwindcss nesting support (#9529)

* Add tailwindcss nesting support

* Update lockfile

5 files changed, 74 insertions, 0 deletions

diff --git a/packages/integrations/tailwind/test/basic.test.js b/packages/integrations/tailwind/test/basic.test.js
new file mode 100644
index 000000000..e5275c81e
--- /dev/null
+++ b/packages/integrations/tailwind/test/basic.test.js
@@ -0,0 +1,33 @@
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('Basic', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/basic/', import.meta.url),
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('works', async () => {
+			const astroChunkDir = await fixture.readdir('/_astro');
+
+			let css = '';
+			for (const file of astroChunkDir) {
+				if (file.endsWith('.css')) {
+					css += await fixture.readFile(`/_astro/${file}`);
+				}
+			}
+
+			expect(css).to.include('box-sizing:border-box;'); // base css
+			expect(css).to.include('text-red-500'); // class css
+			expect(css).to.match(/\.a\[data-astro-cid-.*?\] \.b\[data-astro-cid-.*?\]/); // nesting
+		});
+	});
+});
diff --git a/packages/integrations/tailwind/test/fixtures/basic/astro.config.js b/packages/integrations/tailwind/test/fixtures/basic/astro.config.js
new file mode 100644
index 000000000..cd684d6eb
--- /dev/null
+++ b/packages/integrations/tailwind/test/fixtures/basic/astro.config.js
@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [
+    tailwind({
+      configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
+      nesting: true
+    }),
+  ]
+});
diff --git a/packages/integrations/tailwind/test/fixtures/basic/package.json b/packages/integrations/tailwind/test/fixtures/basic/package.json
new file mode 100644
index 000000000..33e20daaa
--- /dev/null
+++ b/packages/integrations/tailwind/test/fixtures/basic/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@test/tailwind-basic",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/tailwind": "workspace:*"
+  }
+}
diff --git a/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro b/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro
new file mode 100644
index 000000000..ab4df58e3
--- /dev/null
+++ b/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro
@@ -0,0 +1,13 @@
+<div class="text-red-500">red</div>
+
+<div class="a">
+  <div class="b">nested blue</div>
+</div>
+
+<style>
+  .a {
+    .b {
+      color: blue;
+    }
+  }
+</style>
diff --git a/packages/integrations/tailwind/test/fixtures/basic/tailwind.config.js b/packages/integrations/tailwind/test/fixtures/basic/tailwind.config.js
new file mode 100644
index 000000000..f10909681
--- /dev/null
+++ b/packages/integrations/tailwind/test/fixtures/basic/tailwind.config.js
@@ -0,0 +1,6 @@
+import path from 'node:path';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}')],
+};