✨ Tailwind v4

[retlehs]

Ref https://tailwindcss.com/blog/tailwindcss-v4

TODO:

• Switch to non-beta version

Follow-ups:

• Dev server + editor CSS

[codewithfeeling]

This is very promising as a solution to finally getting Sage to work with the API v3 block editor.

The injection works fine folliowing a build with npm build but I can't get it to work in the same way as front styles with hot reloading using npm run dev.

Steps to reproduce:

1. Add some Tailwind styles in editor.css, for example:

@import "tailwindcss";

.editor-styles-wrapper {
  @apply font-sans bg-blue-50 px-32;
}

.editor-styles-wrapper h1 {
  @apply font-bold text-4xl mb-8;
}

.editor-styles-wrapper p {
  @apply mb-4;
}

2. Run npm run build - terminal shows the build process output running successfully
3. Edit a page in wp-admin - styles have been applied as expected:

4. Now run npm run dev - terminal output shows the process is running
5. Make a change to editor.css, eg. change bg-blue-50 to bg-red-100 and save the file
6. No changes are observed, even after fully reloading the admin edit page. Expected behaviour is that the changes will apply immediately, as they do on the front side after changing app.css

This means that hot reloading is working on the front but not admin, which is a little confusing.

I can also confirm that installing an API v2 plugin to disable the iframe editor does not fix things. Styles do not hot reload in this scenario.

[retlehs]

Thank you for testing it out and the feedback! Not yet sure how to tackle the iframe'd editor's CSS in dev mode