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>

Author: 3 people

.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.

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');
+			}
 		}
 	}
 

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);