feat: update the tailwind plugin to suuport tailwindv4 #2819

[SisyphusZheng]

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.

--patch-5

As plugin, work fine with fresh v2 proj, can check: fresh-tailwindv4-template

How Testing Was Conducted

Local Environment Testing

1. Environment Cleanup

rm -rf ./.cache/deno deno.lock node_modules

2. Test Execution

deno task www

3. Result Verification

• Checked functionality in local /www environment
• Confirmed all features working properly

Codespace Environment Testing

• 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/

As plugin for New Fresh v2 proj Environment Testing

• As plugin, work fine with fresh v2 proj, can check: fresh-tailwindv4-template

[SisyphusZheng]

Most of the modifications were made to address deployment issues caused by unintended bot pushes. The website, now supported by new plugin (Tailwind v4), is functioning properly in the local environment.

[SisyphusZheng]

hello there, I attempted to make the plugin-tailwind support tailwind version 4 based on #2819, #2829, and https://github.com/pakornv/fresh-plugin-tailwind. It worked properly under the condition of "nodeModulesDir": "auto", and the "/www" functioned normally after the modification. However, when I tried to remove the support for node_modules, I encountered a situation where @tailwindcss/oxide (the new engine of Tailwind v4, written in Rust) didn't provide support. Due to the breaking changes in version 4, the new @tailwindcss/postcss will attempt to call @tailwindcss/oxide, and it currently seems that this issue cannot be easily resolved (it appears so).

[marvinhagemeister]

Personally, I'm good with requiring nodeModules: "auto". We need that anyway to support the vscode tailwindcss plugin

[marvinhagemeister]

No need to close the PR. Would've loved to get this in

[SisyphusZheng]

No need to close the PR. Would've loved to get this in

I'm encountering too many file conflicts in this old branch and dealing with this issue for the time being. Thank you for your support.

[SisyphusZheng]

What This PR Solves

Major Updates

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.

How Testing Was Conducted

Local Environment Testing

1. Environment Cleanup

rm -rf ./.cache/deno deno.lock node_modules

2. Test Execution

deno task www

3. Result Verification

• Checked functionality in local /www environment
• Confirmed all features working properly

Code Inspection

• Passed deno task ok check

Current Issues

Pending Issues

1. Plugin Stability
   • Currently only tested in local environment
   • Needs JSR deployment for comprehensive testing

[SisyphusZheng]

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

[SisyphusZheng]

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

Meanwhile, I encountered the same problem as issue #2973 during the project upgrade to V2. The buttons don't seem to work, and currently, I'm not sure what's causing this problem.

--patch 5
As plugin, work fine with fresh v2 proj, can check: fresh-tailwindv4-template

[marvinhagemeister]

LGTM, thanks for doing this, this is great!

[marvinhagemeister]

Had to revert in #2988 because the styles on fresh.deno.dev were somehow missing. Not sure yet why.

[SisyphusZheng]

Had to revert in #2988 because the styles on fresh.deno.dev were somehow missing. Not sure yet why.

Sorry this happened😟. I checked plugins, local environment and codespace—styles are fine. Tried deploying fork to Deno Deploy, but it’s slow and affects PR. Not sure if there are other issues. I’ll track progress and hope to be kept informed. Thanks for your help.

[marvinhagemeister]

Na no worries, it isn't your fault. My suspicion is that something with nodeModulesDir + the esbuild deno loader is broken. I couldn't repro the error locally either. This could've happened to anyone, myself included. So don't worry 👍

[Yakumo-Yukari]

error: Uncaught (in promise) Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at mn (fresh-project/node_modules/.deno/tailwindcss@4.1.8/node_modules/tailwindcss/dist/chunk-FEUCFEMW.mjs:35:2121)
    at Module.initTailwind (https://deno.land/x/fresh@1.7.3/plugins/tailwind/compiler.ts:68:5)
    at async initTailwind (https://deno.land/x/fresh@1.7.3/plugins/tailwind.ts:11:10)
    at async Object.configResolved (https://deno.land/x/fresh@1.7.3/plugins/tailwind.ts:91:21)
    at async Promise.all (index 0)
    at async getServerContext (https://deno.land/x/fresh@1.7.3/src/server/context.ts:79:5)
    at async dev (https://deno.land/x/fresh@1.7.3/src/dev/dev_command.ts:57:17)
    at async fresh-project/dev.ts:8:1
Watcher Process failed. Restarting on file change...

When can I get it? I am currently encountering an error using Tailwind CSS 4

[SisyphusZheng]

error: Uncaught (in promise) Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

    at mn (fresh-project/node_modules/.deno/tailwindcss@4.1.8/node_modules/tailwindcss/dist/chunk-FEUCFEMW.mjs:35:2121)

    at Module.initTailwind (https://deno.land/x/fresh@1.7.3/plugins/tailwind/compiler.ts:68:5)

    at async initTailwind (https://deno.land/x/fresh@1.7.3/plugins/tailwind.ts:11:10)

    at async Object.configResolved (https://deno.land/x/fresh@1.7.3/plugins/tailwind.ts:91:21)

    at async Promise.all (index 0)

    at async getServerContext (https://deno.land/x/fresh@1.7.3/src/server/context.ts:79:5)

    at async dev (https://deno.land/x/fresh@1.7.3/src/dev/dev_command.ts:57:17)

    at async fresh-project/dev.ts:8:1

Watcher Process failed. Restarting on file change...

When can I get it? I am currently encountering an error using Tailwind CSS 4

You encountered this information when using Tailwind v4 because the change brought by this Feat was reverted. Currently, it seems there are issues with the Esbuild Loader and NodeModules, and further fixes and attempts are still needed.

However, for now, you can try the plugin by @pakornv: https://github.com/pakornv/fresh-plugin-tailwindcss. Based on this, I also provide a template initialization project for Fresh V2 with Tailwind v4 that is closer to this PR and the corresponding modifications plugin: https://github.com/SisyphusZheng/fresh-project-test/tree/main/fresh-tailwindv4-template.