You must import your Tailwind stylesheet, e.g. in a shared l

Error message

You must import your Tailwind stylesheet, e.g. in a shared layout:

What it means

After `astro add tailwind` successfully installs the Vite-plugin-based Tailwind integration and generates src/styles/global.css, Astro prints this 'action required' notice: nothing imports the stylesheet yet, so Tailwind styles will not apply until you import it in a shared layout or another always-rendered component. It is a setup follow-up instruction, not a failure.

Source

Thrown at packages/astro/src/cli/add/index.ts:431

		}
		// NOTE: failure shouldn't happen in practice because `updateAstroConfig` doesn't return that.
		// Pipe this to the same handling as `'updated'` for now.
		case 'failure':
		case 'updated':
		case undefined: {
			const list = integrations
				.map((integration) => `  - ${integration.integrationName}`)
				.join('\n');
			logger.info(
				'SKIP_FORMAT',
				msg.success(
					`Added the following integration${
						integrations.length === 1 ? '' : 's'
					} to your project:\n${list}`,
				),
			);
			if (integrations.find((integration) => integration.integrationName === 'tailwind')) {
				logger.warn(
					'SKIP_FORMAT',
					msg.actionRequired(
						'You must import your Tailwind stylesheet, e.g. in a shared layout:\n',
					),
				);
				clack.box(
					getDiffContent('---\n---', "---\nimport '../styles/global.css'\n---")!,
					'src/layouts/Layout.astro',
					{
						rounded: true,
						withGuide: false,
						width: 'auto',
					},
				);
			}
		}
	}

View on GitHub (pinned to e294953aa8)

Solutions

Add `import '../styles/global.css';` to a shared layout such as src/layouts/Layout.astro
Or import the stylesheet from any component rendered on every page (e.g. a BaseHead.astro partial)
Restart the dev server and confirm Tailwind utility classes now apply

Example fix

// before: src/layouts/Layout.astro
<html>
  <body><slot /></body>
</html>

// after
---
import '../styles/global.css';
---
<html>
  <body><slot /></body>
</html>

Defensive patterns

Strategy: validation

Validate before calling

// Verify the generated stylesheet is actually imported somewhere always rendered
import { readFileSync, existsSync } from 'node:fs';
function tailwindImported(layout = 'src/layouts/Layout.astro'): boolean {
  return existsSync(layout) && /import\s+['"].*global\.css['"]/.test(readFileSync(layout, 'utf-8'));
}

Prevention

After any `astro add` command, read the 'action required' box before assuming setup is complete
Keep one shared layout (or BaseHead partial) that imports global.css
Add a smoke test asserting rendered HTML contains Tailwind-generated CSS rules

When it happens

Trigger: Running `astro add tailwind` and accepting the prompts; the command finishes, logs the added integration, then emits this notice together with a diff box suggesting an import in src/layouts/Layout.astro.

Common situations: New projects whose starter layout does not import the generated CSS; users migrating from the old @astrojs/tailwind integration who expected styles to be injected automatically without an import.

Related errors

AI-assisted analysis of withastro/astro@e294953aa8 (2026-08-18). Data as JSON: /api/errors/821bc0845b48a30f. Report an issue: GitHub.