From ac4358052af2c1817dec999598bc4e3d8fd0bdaf Mon Sep 17 00:00:00 2001
From: Sean Boult <996134+Hacksore@users.noreply.github.com>
Date: Tue, 4 Feb 2025 08:27:17 -0600
Subject: [PATCH] Tailwind v4 onboarding enhancements (#13119)

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
---
 .changeset/spotty-maps-sneeze.md    |  7 +++++++
 packages/astro/src/cli/add/index.ts | 14 +++++++++++++-
 packages/astro/src/core/messages.ts |  9 +++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spotty-maps-sneeze.md

diff --git a/.changeset/spotty-maps-sneeze.md b/.changeset/spotty-maps-sneeze.md
new file mode 100644
index 0000000000..f2dd083c88
--- /dev/null
+++ b/.changeset/spotty-maps-sneeze.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Adds extra guidance in the terminal when using the `astro add tailwind` CLI command
+
+Now, users are given a friendly reminder to import the stylesheet containing their Tailwind classes into any pages  where they want to use Tailwind. Commonly, this is a shared layout component so that Tailwind styling can be used on multiple pages.
diff --git a/packages/astro/src/cli/add/index.ts b/packages/astro/src/cli/add/index.ts
index d34c60f65e..41e681e614 100644
--- a/packages/astro/src/cli/add/index.ts
+++ b/packages/astro/src/cli/add/index.ts
@@ -361,7 +361,19 @@ export async function add(names: string[], { flags }: AddOptions) {
 					} to your project:\n${list}`,
 				),
 			);
-			logger.info('SKIP_FORMAT', msg.success("Import './src/styles/global.css' in a layout"));
+			if (integrations.find((integration) => integration.integrationName === 'tailwind')) {
+				const code = boxen(
+					getDiffContent('---\n---', "---\nimport './src/styles/global.css'\n---")!,
+					{
+						margin: 0.5,
+						padding: 0.5,
+						borderStyle: 'round',
+						title: 'src/layouts/Layout.astro',
+					},
+				);
+				logger.warn('SKIP_FORMAT', msg.actionRequired('You must import your Tailwind stylesheet, e.g. in a shared layout:\n'));
+				logger.info('SKIP_FORMAT', code + '\n');
+			}
 		}
 	}
 
diff --git a/packages/astro/src/core/messages.ts b/packages/astro/src/core/messages.ts
index 4198e96c37..66011febf6 100644
--- a/packages/astro/src/core/messages.ts
+++ b/packages/astro/src/core/messages.ts
@@ -209,6 +209,15 @@ export function failure(message: string, tip?: string) {
 		.join('\n');
 }
 
+export function actionRequired(message: string) {
+	const badge = bgYellow(black(` action required `));
+	const headline = yellow(message);
+	return ['', `${badge} ${headline}`]
+		.filter((v) => v !== undefined)
+		.map((msg) => `  ${msg}`)
+		.join('\n');
+}
+
 export function cancelled(message: string, tip?: string) {
 	const badge = bgYellow(black(` cancelled `));
 	const headline = yellow(message);