Skip to content

plugin-tailwindcss: tailwind v4#2829

Closed
AugustinMauroy wants to merge 7 commits intodenoland:mainfrom
AugustinMauroy:tailwind-v4
Closed

plugin-tailwindcss: tailwind v4#2829
AugustinMauroy wants to merge 7 commits intodenoland:mainfrom
AugustinMauroy:tailwind-v4

Conversation

@AugustinMauroy
Copy link

@AugustinMauroy AugustinMauroy commented Feb 23, 2025

close #2819

@AugustinMauroy
Copy link
Author

AugustinMauroy commented Feb 26, 2025

@lucacasonato can I have help here there some issues with deno/workspace with my changes www shouldn't use tailwind 4 but it's do it. I'm not deno expert so could you take a look ?

Edit updating to Deno v2.2.2 fix issue

@lishaduck
Copy link
Contributor

@AugustinMauroy, can you publish this separately whilst we wait for it to get merged?

@AugustinMauroy
Copy link
Author

@AugustinMauroy, can you publish this separately whilst we wait for it to get merged?

What do you mean ?

@lishaduck
Copy link
Contributor

@AugustinMauroy, can you publish this separately whilst we wait for it to get merged?

What do you mean ?

I mean, could you publish the @fresh/plugin-tailwind package to JSR as @AugustinMauroy/fresh-plugin-tailwind or whatever so it can be used until it gets merged?

@AugustinMauroy
Copy link
Author

I mean, could you publish the @fresh/plugin-tailwind package to JSR as @AugustinMauroy/fresh-plugin-tailwind or whatever so it can be used until it gets merged?
Your have:
https://jsr.io/@pakornv/fresh-plugin-tailwindcss

But I saw you are learning web dev. So what I can recommend it's to wait official plugin.

@lishaduck
Copy link
Contributor

But I saw you are learning web dev. So what I can recommend it's to wait official plugin.

And where did you see that?
I'd hardly say I'm still learning beyond that of the continuous learning needed to remain on the JS treadmill.
I've been doing webdev for 5 years. According to the State of JS, that puts me around the median time for a web developer.

@AugustinMauroy
Copy link
Author

of topic but your GH profile said that your are learning Preact/fresh

@lishaduck
Copy link
Contributor

of topic but your GH profile said that your are learning Preact/fresh

Oh, I haven't updated that in a while. I was learning it last year, now I feel fairly comfortable with it, I use it for most new web projects I do.
Thanks for the reminder to update it!

@AugustinMauroy
Copy link
Author

@lucacasonato need that to upgrade JSR to tailwind v4

Copy link
Contributor

@SisyphusZheng SisyphusZheng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi there, I have reviewed this change in Codespace. It looks like you are still using the previous version plugin in the/www?, and the new version plugin
screenshot-1746772533744
does not seem to be working properly. Could u double-check the update.

@AugustinMauroy
Copy link
Author

Yeah I'll check

@AugustinMauroy
Copy link
Author

@SisyphusZheng i had fix WWW but test are failling I didn't get why it's falling

@iuioiua
Copy link
Contributor

iuioiua commented May 9, 2025

  • ci / test (v2.x, macOS-latest) (pull_request)

Checkout the logs https://github.com/denoland/fresh/actions/runs/14926742379/job/41933249430?pr=2829

@SisyphusZheng
Copy link
Contributor

@SisyphusZheng i had fix WWW but test are failling I didn't get why it's falling
Maybe we need to check the logs and try running deno fmt and deno ok to debug the issue. And then we need to ensure that the v2.x CI/tests pass.

@AugustinMauroy
Copy link
Author

it's should not because there are const FRESH_TAILWIND_VERSION = "0.0.1-alpha.7"; that explicitly said "use plugins made for tailwind v3"

@SisyphusZheng
Copy link
Contributor

it's should not because there are const FRESH_TAILWIND_VERSION = "0.0.1-alpha.7"; that explicitly said "use plugins made for tailwind v3"

hello, I managed to make the modification work successfully based on your code, but only when node_modules is present. In the code you provided, the /www directory wasn't supported by the modified source code. Instead, it relied on the plugins previously built with Tailwind v3. When I tried to switch to using the provided plugin source code for support, it still didn't seem to work properly.

I checked the upstream plugin mentioned in #2819, which this plugin's code is based on, and found that it has the same issue as mine. It appears to only work correctly with node_modules support. Additionally, there are some discrepancies between that upstream plugin and our target requirements.

The specific problem I'm encountering now is what I mentioned in #2819.

@AugustinMauroy
Copy link
Author

Humm it's seam be a deno issue. Because tailwind v4 need node_module. Because they've created a complete system for parsing and transforming css. Which is faster, but needs the node module. Because it uses native adon

marvinhagemeister pushed a commit that referenced this pull request May 19, 2025
Updates relating to Tailwind CSS v4 can be handled in #2903 or #2829.
marvinhagemeister added a commit that referenced this pull request May 21, 2025
Inspired by #2819, #2829, and
https://github.com/pakornv/fresh-plugin-tailwindcss, I made minimal
modifications to the plugin-tailwind, I originally intended to update
based on #2829, but I was informed by the system that I couldn't push.

Due to the breaking changes in Tailwind v4, some PostCSS plugins are no
longer required. Additionally, I updated the syntax in the /www
directory. The /www directory now uses the updated plugin supported by
Tailwind v4.I think this has made initial progress.

# What This PR Solves
The Tailwind plugin has been updated to support Tailwind v4, and it is
currently functioning well both in the repository's www directory and in
the initialized project which for test.

## --patch-1

### 1. Dependency Optimization
- Removed `cssnano` dependency, using Tailwind v4's built-in
optimization(Based on @csvn 's suggestion)
- Removed `autoprefixer` dependency
- Updated `tailwind-plugin` version number
### 2. Build Configuration Adjustments
- Added `--node-modules-dir` parameter to `/www` task for Tailwind v4
support (Based on @marvinhagemeister 's suggestion)
- Added `--allow-scripts` parameter to enable `@tailwindcss/oxide`
execution
### 3. Code Adaptation
- Modified Tailwind-related code in `/www` to support Tailwind v4
- Updated dependency configuration in `deno.json`
### 4. Feature Restoration
- Added `imagescript` and `astral` dependencies to restore screenshot
functionality lost in previous PR updates
- Fixed the issue where the `tailwind-plugin` dependency was incorrectly
pointing to the JSR package instead of the local repository source code
in previous PR.

## --patch-2
- Upgraded Tailwind CSS to the latest version.
- Removed unnecessary dependencies.
- Enabled CSS minification by default when Fresh is in production mode.
- Updated docs/canary/examples/migration-guide.md to support the new
Tailwind plugin format.
- Updated init/src/init.ts to support the new Tailwind version and
plugin version, use new `@import "tailwindcss"`, and generate the new
plugin format.
- Updated init/src/init_test.ts: tests now expect `css` to match
`/tailwindcss/` instead of `/@tailwind/`.
- Removed plugin-tailwindcss/src/types.ts as it is no longer needed, and
updated plugin-tailwindcss/src/mod.ts and www/dev.ts to support the new
format.

Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>

## --patch-3
Addressing @marvinhagemeister feedback, this patch reverts the
unintended loss of PR #2960's changes caused by merge conflicts.

## --patch-4

I initialized a project according to the migration documentation and
used @fresh/update to test whether the plugin works properly with
v2-alpha-34. The results show that it works fine.

- The plugin is published at
jsr:@freshpress/fresh-plugin-tailwind@0.0.1-alpha.8.

- The test project is published at
https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-project.

# How Testing Was Conducted

## Local Environment Testing
1. Environment Cleanup
```bash
rm -rf ./.cache/deno deno.lock node_modules
```

2. Test Execution
```bash
deno task www
```

3. Result Verification
- Checked functionality in local `/www` environment
- Confirmed all features working properly

## Code Inspection
- Passed `deno task ok` check

## This forked /www website is hosted and running on GitHub Codespaces,
with support for the latest code changes. You can check it out at:
https://silver-trout-pjr4jw7xx5x9299x6-8000.app.github.dev/

---------

Co-authored-by: 李嘉图·M·路 <146103794+Ricardo-M-Zheng@users.noreply.github.com>
Co-authored-by: deno-deploy[bot] <75045203+deno-deploy[bot]@users.noreply.github.com>
Co-authored-by: Asher Gomez <ashersaupingomez@gmail.com>
Co-authored-by: Marvin Hagemeister <marvin@deno.com>
@lishaduck
Copy link
Contributor

@marvinhagemeister, I think this has been superseded?

@marvinhagemeister
Copy link
Collaborator

marvinhagemeister commented Jul 21, 2025

Superseded by #3054

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tailwind 4

5 participants