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
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 9 commits into
base: main
Choose a base branch
Loading
from
Open

feat: tailwind v4 css based plugin #419

wants to merge 9 commits into from

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.

@lacrioque
Minor changes to be compatible with tailwind4.
6a8c41a 
Files added:
- tailwind.v4.js
Issues 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 removed
Issues 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
@lacrioque
fix: also export tailwind v4 in package.json
7dc9071
@lacrioque
fix: removed unused invalid class definition
1a84c74
@lacrioque
chore: build
779118b
@lacrioque
fix: typo in package.json
98cef17
@lacrioque
fix: typo in package.json v2
4ae054f
@lacrioque
fix: try to exchange an invalid utility selector
eea2a63
@lacrioque
feat: generate a tailwind v4 compatible plugin css
559a6ad 
### 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

@lacrioque
fix: found a way to work around the new variant issue
ab583c2 
- 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.

@pscheit
Copy link

pscheit commented May 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 this theme showcase but probably more comprehensive
  • this as a completely separate theme/TW plugin under the name of tailwind4
  • same configurability via CSS variables as tailwind theme.

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

@pscheit
Copy link

pscheit commented May 16, 2025

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

But yeah sorry, offtopic

Sign up for free to 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
Morty Proxy This is a proxified and sanitized view of the page, visit original site.