steep sandal
Hi, I'm trying to migrate my Vite React SPA to astro, but apparently the build command is not including CSS properly. Custom styles and tailwind are not being loaded in the preview, but everything works fine in dev.
I basically added a data prop to my component to make SSG.
import App from "../old/main.tsx";
//... other imports, data fetching and getStaticPaths
<App
client:load
data={{
offer,
}}
/>
(PS: also posted on support channel)
modern bladeBOT
Hi @steep sandal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro has a built-in CSS bundling system that automatically includes styles in the built output. However, if you're bypassing this system, it's your responsibility to ensure that the referenced file is properly included in the final page output. If you're using advanced features like ?raw CSS imports or ?url CSS imports, be aware that these methods bypass Astro's automatic CSS handling and are not recommended for most users [source (https://docs.astro.build/en/guides/styling/#advanced)].
If you're using Tailwind, ensure that you've installed the Tailwind integration (https://docs.astro.build/en/guides/integrations-guide/tailwind/) correctly. No changes to your existing Tailwind code should be required [source (https://docs.astro.build/en/guides/migrate-to-astro/from-create-react-app/#cra-styling-to-astro)].
If you're still having issues, try restarting the dev server. If you edit and save a file and don't see your site update accordingly, try refreshing the page. If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server again [source (https://docs.astro.build/en/guides/integrations-guide/tailwind/#others)].
If none of these solutions work, it's possible that there's a syntax error causing Astro to encounter an unknown error while parsing your CSS [source (https://docs.astro.build/en/reference/errors/unknown-csserror/#_top)]. Check the error message for more information.