Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: tailwind v4 css based plugin#419

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
lacrioque wants to merge9 commits intovueform:main
base:main
Choose a base branch
Loading
fromlacrioque:main-tw4-css

Conversation

lacrioque
Copy link

🔗 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

Why

  • tailwind v4 has opted to be a css first architecture, thus degrading jsbased plugins deprecated.
  • to reflect that and also take care of the changes in the global style and variables a pure css plugin was necessary

How

  • Based on the v3 plugin file and the intermediate step of the v4-compatibility-plugin js a generator was created to build a v4 compatible theme plugin.

Use it

It is really as easy as importing one css file.

/* This is not strictly necessary as the plugin-css already imports it, but I experienced weird quirks without it */@import"tailwindcss";@import"@vueform/vueform/dist/tailwind.v4.vueform-plugin.css";@source"../node_modules/@vueform/vueform";

Problems

  • Big parts of the change are yet untested. As I only use a small substack in my application.
  • I will help with testing, but I am currently rather busy and would need a few days.

📝 Checklist

  • I have linked an issue or discussion.

tutuca reacted with heart emoji
Files added:- tailwind.v4.jsIssues found:- corePlugins is neither set nor available anymore- utilities must begin with a lowercase letter in tw4- the `e` (escape) in the plugin creator was removedIssues fixed:- just always assume preflight- changed the utility classes beginning with a `-` to `reduce-by-` instead- shimmed the `e` method for now and added a TODO
### Why  - tailwind v4 has opted to be a css first architecture, thus degrading jsbased plugins deprecated.  - to reflect that and also take care of the changes in the global style and variables a pure css plugin was necessary### How  - Based on the v3 plugin file and the intermediate step of the v4-compatibility-plugin js a generator was created to build a v4 compatible theme plugin.## Problems  - Big parts of the change are yet untested. As I only use a small substack in my application.
@lacrioque
Copy link
Author

Issues identified so far:

  • Sliders do not work as @custom-variant is nowhere near as effective as addVariant was in tw3
  • Possible workaround: tailwind-variants as dependency

- this will bump the minimum required browser version by quite a bit, but generally tailwind4 is already on this level as well- fixed some issues with the new utility method
@pvencill
Copy link

Looking forward to this getting merged in; I'll try and test it if I get time this weekend and will provide comments if I find anything.

fralps reacted with thumbs up emoji

@pscheit
Copy link

pscheit commentedMay 16, 2025•
edited
Loading

hey@lacrioque, happy to help. How can I test this?

(the instructions how to install the css module are clear, but how do I "checkout" this PR?)

oooh, never mind. You commit the dist files!

@adamberecz
Copy link
Collaborator

To be able to merge this, I would definitely need:

  • one page with all UI elements in all possible UI states, similarly to thistheme showcase but probably more comprehensive
  • this as a completely separate theme/TW plugin under the name oftailwind4
  • same configurability via CSS variables astailwind theme.

A great addition would be some Playwright screenshot based tests that compares point 1 with the originaltailwind theme.

@pscheit
Copy link

In general (unit-) testing and visual comparison for frontend elements sounds like a use case for storybook? Or for the visual testing can recommendhttps://percy.io/

But yeah sorry, offtopic

@lacrioque
Copy link
Author

Status report on this:
I will keep working on it, I'm just a bit flooded atm.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

4 participants
@lacrioque@pvencill@pscheit@adamberecz
[8]ページ先頭
©2009-2025 Movatter.jp