🔗 Linked issue

Not in an issue but in a discussion -> #392

❓ Type of change

• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Files added:

• tailwind.v4.js

Issues found:

• corePlugins is neither set nor available anymore
• utilities must begin with a lowercase letter in tw4 and cannot contain arbitrary selectors like [body]
• the e (escape) in the plugin creator was removed

Issues fixed:

• just always assume preflight
• changed the utility classes beginning with a - to reduce-by- instead
• removed some unused utilities.
  • An extensive search in build files as well as source files did not result in any entries except in the tailwind generation file.
  • I will still mark this as breaking, just in case.
• shimmed the e method for now and added a TODO.
  • The e method is dependent on postcss and since tailwind has removed the dependency the root method (postcss-selector-parser) is not available in the tailwind code itself. It would be possible to shim the dependency, but i would not recommend it.

How to use

To use this in an actual project you would need to import it into the main.[s]css as such:

@import "tailwindcss";

@plugin "@vueform/vueform/tailwind.v4.js";
@source "../node_modules/@vueform/vueform";

.your_custom_css {
    display: block;
}

Afterthought

This is a short term compatibility solution as no one knows how long legacy plugins will be supported.
For a long-term solution it would be better to create a tw4 compatible css file with the new syntax.

I am available for that, but it will take a bit more time.

📝 Checklist

• I have linked an issue or discussion.