puck icon indicating copy to clipboard operation
puck copied to clipboard

Tailwind Classes Not Applying Properly with --turbo in Puck Editor

Open azharuddin-mulla-amla opened this issue 7 months ago • 1 comments

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

  1. Run the development server with --turbo.
  2. Add Tailwind CSS classes to a component and save.
  3. Observe the behavior on hot reload.

What happens

  1. Newly added or updated Tailwind classes do not apply after hot reload.
  2. Previously applied classes may also get discarded.
  3. 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

  1. External CSS Issue: https://github.com/user-attachments/assets/9c590a33-ad12-4d90-9abd-dccb32b79b80
  2. Tailwind Classes Issue: https://github.com/user-attachments/assets/1d7296d9-962e-478b-9fa7-df9d05b0850f

azharuddin-mulla-amla avatar May 12 '25 09:05 azharuddin-mulla-amla

As a workaround for now, I’d recommend not using --turbo.

FedericoBonel avatar May 12 '25 09:05 FedericoBonel