{"record":{"id":"821bc0845b48a30f","repo":"withastro/astro","slug":"you-must-import-your-tailwind-stylesheet-e-g-in","errorCode":null,"errorMessage":"You must import your Tailwind stylesheet, e.g. in a shared layout:\n","messagePattern":"You must import your Tailwind stylesheet, e\\.g\\. in a shared layout:\n","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"packages/astro/src/cli/add/index.ts","lineNumber":431,"sourceCode":"\t\t}\n\t\t// NOTE: failure shouldn't happen in practice because `updateAstroConfig` doesn't return that.\n\t\t// Pipe this to the same handling as `'updated'` for now.\n\t\tcase 'failure':\n\t\tcase 'updated':\n\t\tcase undefined: {\n\t\t\tconst list = integrations\n\t\t\t\t.map((integration) => ` - ${integration.integrationName}`)\n\t\t\t\t.join('\\n');\n\t\t\tlogger.info(\n\t\t\t\t'SKIP_FORMAT',\n\t\t\t\tmsg.success(\n\t\t\t\t\t`Added the following integration${\n\t\t\t\t\t\tintegrations.length === 1 ? '' : 's'\n\t\t\t\t\t} to your project:\\n${list}`,\n\t\t\t\t),\n\t\t\t);\n\t\t\tif (integrations.find((integration) => integration.integrationName === 'tailwind')) {\n\t\t\t\tlogger.warn(\n\t\t\t\t\t'SKIP_FORMAT',\n\t\t\t\t\tmsg.actionRequired(\n\t\t\t\t\t\t'You must import your Tailwind stylesheet, e.g. in a shared layout:\\n',\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tclack.box(\n\t\t\t\t\tgetDiffContent('---\\n---', \"---\\nimport '../styles/global.css'\\n---\")!,\n\t\t\t\t\t'src/layouts/Layout.astro',\n\t\t\t\t\t{\n\t\t\t\t\t\trounded: true,\n\t\t\t\t\t\twithGuide: false,\n\t\t\t\t\t\twidth: 'auto',\n\t\t\t\t\t},\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n","sourceCodeStart":413,"sourceCodeEnd":449,"githubUrl":"https://github.com/withastro/astro/blob/e294953aa8aadd98d5be92e60a03037b05dbdfd4/packages/astro/src/cli/add/index.ts#L413-L449","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"// before: src/layouts/Layout.astro\n\n \n\n\n// after\n---\nimport '../styles/global.css';\n---\n\n \n","handlingStrategy":"validation","validationCode":"// Verify the generated stylesheet is actually imported somewhere always rendered\nimport { readFileSync, existsSync } from 'node:fs';\nfunction tailwindImported(layout = 'src/layouts/Layout.astro'): boolean {\n return existsSync(layout) && /import\\s+['\"].*global\\.css['\"]/.test(readFileSync(layout, 'utf-8'));\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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"],"tags":["astro","tailwind","cli","css","setup","action-required"],"backgroundTag":"post-install-configuration-step","analyzedSha":"e294953aa8aadd98d5be92e60a03037b05dbdfd4","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}