tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Enable TailwindCSS in Serverless, Edge and Restricted Environments for Dynamic Styling by Bypassing `fast-glob` if not used

Open vfssantos opened this issue 1 year ago • 0 comments

What version of Tailwind CSS are you using?

3.4.10

What build tool (or framework if it abstracts the build tool) are you using?

  • Deno v1.4.44
  • Postcss v8.0.0

What version of Node.js are you using?

----- not applicable: using Deno instead -----

What browser are you using?

---- not applicable ----

What operating system are you using?

macOS

Describe your issue

Description:

I have identified a potential improvement for TailwindCSS that would enhance its compatibility with environments that have limited read permissions, such as Cloudflare Workers or Deno WebWorkers / Deno Deploy with limited read / write permissions.

Problem:

When running TailwindCSS in environments where read access to the file system is restricted (e.g., serverless functions, WebWorkers), the dependency on fast-glob for resolving file paths can cause issues. Specifically, fast-glob requires read access to the instance's current directory (via process.cwd()), which is not necessary for use cases where the Tailwind config is passed directly into PostCSS, and the HTML containing Tailwind CSS utilities is provided in-memory as the raw property in content.files.

Proposed Solution:

A simple solution (about 10 lines of code) could be implemented to check if the length of the paths to be verified is greater than zero. If paths are present, the regular logic using fast-glob would proceed. If not, we can skip the fast-glob call, allowing TailwindCSS to function in environments with restricted read permissions.

Benefits:

This change would enable dynamic CSS generation in restricted serverless environments, making TailwindCSS more versatile and opening up new use cases, such as running on platforms like Cloudflare Workers or Deno WebWorkers without the need for read access.

Reproduction URL

  1. Clone the repo: https://github.com/vfssantos/tailwind-edge-test/tree/main
  2. As we're using Deno in that repo, make sure you have Deno installed locally
  3. Run the project as instructed. You'll be prompted for permissions. You can deny all of them and would still work, except for the --read for cwd command (which is used by fast-glob).

**Expected Behavior ** : TailwindCSS should allow dynamic CSS generation without requiring file system read access when the paths to be checked are empty.

Additional Notes : I am happy to contribute this improvement via a PR if the maintainers agree with the approach.

vfssantos avatar Aug 30 '24 13:08 vfssantos