puck
puck copied to clipboard
Tailwind Classes Not Applying Properly with --turbo in Puck Editor
Description
When using the Puck editor with the --turbo flag, Tailwind CSS classes behave inconsistently. On initial load, Tailwind classes apply correctly. However, on subsequent hot reloads after modifying or adding new Tailwind classes, they no longer take effect. A full page refresh is required to see the changes. Additionally, applying styles via an external CSS file introduces unwanted scrollbars in the Puck preview viewport.
Github Link for Source Code
https://github.com/azharuddin-mulla-amla/puck-turbo.git
Environment
- Puck version: ^0.18.3
- NextJs version: 15.3.2
- React version: 19.0.0
- Browser version: Chrome 135.0.7049.116
- Additional environment info: Window 10
Steps to reproduce
- Run the development server with --turbo.
- Add Tailwind CSS classes to a component and save.
- Observe the behavior on hot reload.
What happens
- Newly added or updated Tailwind classes do not apply after hot reload.
- Previously applied classes may also get discarded.
- Changes appear only after a full page refresh.
What I expect to happen
Tailwind CSS classes should apply immediately on hot reload without needing a full page refresh.
Reference for Video
- External CSS Issue: https://github.com/user-attachments/assets/9c590a33-ad12-4d90-9abd-dccb32b79b80
- Tailwind Classes Issue: https://github.com/user-attachments/assets/1d7296d9-962e-478b-9fa7-df9d05b0850f
As a workaround for now, I’d recommend not using --turbo.