Cloudflare Developers•4mo ago

Remix Cloudflare and tailwindcss

I installed Remix Run, and the deployment is working correctly with Cloudflare. I then installed TailwindCSS, following all the instructions, but TailwindCSS is not working. Could it be that some additional specific configuration is needed to make it compatible with Cloudflare?

1 Reply

JustinNoel•4mo ago

This is my very old hack to get Remix (1.2.3), CF, and tailwind working. I'm not sure if it's even relevant, but it might help: package.json:

{
  "scripts": {
    "build": "npm run build:css && cross-env NODE_ENV=production remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"cross-env NODE_ENV=development run-p dev:*\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup cloudflare-pages; patch-package;",
    "dev:remix": "remix watch",
    "dev:wrangler": "wrangler pages dev ./public --watch ./build --binding $(cat .env)",
    "start": "npm run dev",
    "format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{json,js,jsx,ts,tsx,mjs,css,scss,md,yml}' --write",
    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --ignore-path .eslintignore . --max-warnings 0 --fix",
    "prepare": "husky install"
  }
}

{
  "scripts": {
    "build": "npm run build:css && cross-env NODE_ENV=production remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"cross-env NODE_ENV=development run-p dev:*\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup cloudflare-pages; patch-package;",
    "dev:remix": "remix watch",
    "dev:wrangler": "wrangler pages dev ./public --watch ./build --binding $(cat .env)",
    "start": "npm run dev",
    "format": "prettier --config .prettierrc --ignore-path .prettierignore '**/*.{json,js,jsx,ts,tsx,mjs,css,scss,md,yml}' --write",
    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --ignore-path .eslintignore . --max-warnings 0 --fix",
    "prepare": "husky install"
  }
}

Gaming

Programming

Remix Cloudflare and tailwindcss