Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues Activity

Tailwind v4 onboarding enhancements (#13119)

Browse source 
Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
This commit is contained in:
Sean Boult 2025-02-04 08:27:17 -06:00 • committed by GitHub
parent 828b7b3691
commit ac4358052a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/spotty-maps-sneeze.md Normal file
View file

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

14
packages/astro/src/cli/add/index.ts
View file

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

9
packages/astro/src/core/messages.ts
View file

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