Answer a question

I have a project that is using svelte-kit and Tailwind CSS. I recently moved it over to using docker compose. When I run my containers, I run them in WSL because they usually run better there. When I start the container that runs the development server, it starts up and runs just fine, but when I open the URL in my browser, I get the following error.

Error: EACCES: permission denied, mkdir '/root/.tailwindcss/touch'
    at Object.mkdirSync (node:fs:1325:3)
    at Object.<anonymous> (/var/www/html/node_modules/tailwindcss/jit/lib/setupContext.js:44:8)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/var/www/html/node_modules/tailwindcss/jit/index.js:7:22)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)

I'm unsure what's causing this error but I think it has something to do with tailwind. Here is a link to my docker-compose file: https://github.com/DriedSponge/GorillianCurrencyConversion/blob/master/docker-compose.yml

If you want to try it out yourself, here is a link to the repo and the steps to reproduce: https://github.com/DriedSponge/GorillianCurrencyConversion

Install Packages: docker-compose run npm install

Start Dev Server: docker-compose --profile dev up -d --build

Please let me know if you have any ideas on what's happening, or if you need any additional information from me. Thanks in advance!

Answers

It looks like Tailwind is trying to create a touch file which has something to do with watching for file changes during development, specifically when Tailwind is in JIT mode.

You might be able to fix this by either:

1. Allowing write access to /root/.tailwindcss.
2. Disabling touch by setting the TAILWIND_DISABLE_TOUCH environment variable.
3. Changing the touch file directory by setting the TAILWIND_TOUCH_DIR environment variable to a location where writing is allowed.

To set environment variables, it might be most convenient to set those in your package.json file. Simply add the environment variable in front of the relevant command under scripts, such as:

"dev": "TAILWIND_TOUCH_DIR='/var/www/html/.tailwindcss/touch' svelte-kit dev"

Be careful not to point this directory to one containing important files, since Tailwind will delete all the files inside that directory.

None of these options are documented anywhere except for comments in the source so I'm not entirely sure what the consequences of this are, especially during development mode. I believe that this is used for communicating when files have changed, so option 1 or 3 might be the safest choices.