Upgraded to Fresh 1.60 but TailwindCSS not rendering
I updated my codebase to Fresh 1.60 using TailwindCSS instead of twind. When I pushed the code to Deno Deploy, the CSS didn't render. I created a separate repository with a brand new Fresh 1.60 install and deploy it as well and it also didn't render the CSS. Is there a way to fix this? Thanks in advance.
5 Replies
It seems you've encountered an issue with Tailwind CSS not rendering after upgrading to Fresh 1.6. The documentation mentions that Fresh 1.6 introduces first-class support for Tailwind CSS, moving away from Twind, which is now deprecated. This change should provide a more polished editor experience and performance benefits, as Tailwind CSS only needs to generate CSS once on deployment, rather than on the fly with Twind.
Here are a few steps you can take to troubleshoot the issue:
1. Ensure Tailwind CSS is set up correctly: Since Fresh 1.6 uses the Tailwind CSS npm package, make sure you have followed the guide in the Fresh documentation to switch from Twind to Tailwind CSS. This includes setting up ahead-of-time builds for your project.
2. Check for build errors: When deploying to Deno Deploy, look for any build errors that might indicate a problem with the Tailwind CSS setup.
3. Verify asset serving: Fresh 1.6 gives priority to pre-generated assets when serving them if it encounters the same file in
_fresh/static. Ensure that your Tailwind CSS is being generated correctly and that the assets are placed in the appropriate directory.
4. Inspect the deployed site: Use the browser's developer tools to inspect the network requests and ensure that the Tailwind CSS file is being requested and loaded correctly. Check for any 404 errors that might indicate the CSS file is not being found.
5. Review the Fresh 1.6 release notes: The documentation provides details on the new features and changes in Fresh 1.6. Review the release notes to ensure that all necessary steps for the upgrade have been followed.
If you've gone through these steps and the issue persists, it might be helpful to look at the specific configuration of your Fresh project or anycustomizations that might be affecting the CSS rendering. Since the documentation does not provide a direct solution to this issue, you may need to experiment with the setup or seek further assistance from the Fresh community or maintainers. 🦕
Have you set AOT builds according to #7 in https://fresh.deno.dev/docs/examples/migrating-to-tailwind ?
Migrating to Tailwind | Fresh docs
Migrating from twind to Tailwind CSS
Is AOT build a requirement? Just curious, I’m also learning Fresh rn
for the tailwind plugin yes
for twind plugin no