Can't make it to work on fly.io about remix-tailwind HOT 11 CLOSED

@AlonGvili make sure you include all tailwind dependencies (like tailwinds, @tailwindss/form into your dependencies not your dev dependencies because those will be running on the server. And fly.io image will strip all dev dependencies out of your docker image

from remix-tailwind.

Can you show your code, or provide a minimal reproduction for this?

from remix-tailwind.

Can you show your code, or provide a minimal reproduction for this?

i just copy your example from the custom CSS section and point it to my CSS file

// app/routes/tailwindcss.tsx
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"

export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css")

my custom CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .animation-delay-3000 {
    animation-delay: 3s;
  }
}

from remix-tailwind.

And your route file? By that, I mean the one that has the links function in it

from remix-tailwind.

root.tsx

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: "/tailwindcss", type: "text/css" }]
}

from remix-tailwind.

Alright, that all looks good. So this:

I get an error that the mime type is text/html and not text/css

From past experience, this tells me that it's not finding the /tailwindcss route at all, and is serving the error HTML. Have you verified that the actual CSS is coming from that route?

from remix-tailwind.

Alright, that all looks good. So this:

I get an error that the mime type is text/html and not text/css

From past experience, this tells me that it's not finding the /tailwindcss route at all, and is serving the error HTML. Have you verified that the actual CSS is coming from that route?

how can I verified?, on my local everything is working even if I do build & start its working.

from remix-tailwind.

Go to your deployment on fly, and visit my.fly.app/tailwindcss in the browser to see what you get

from remix-tailwind.

Go to your deployment on fly, and visit my.fly.app/tailwindcss in the browser to see what you get

error 500, but I can't figure out why.

maybe its to much, but can you create a demo remix on fly with a working code ?

from remix-tailwind.

You should check the browser console network tab for more details, or check your fly logs in the terminal.

maybe its to much, but can you create a demo remix on fly with a working code ?

I have a prod app running that uses it: https://thoughtbucket.fly.dev/tailwindcss
Here's the source: https://github.com/itsMapleLeaf/thoughtbucket

from remix-tailwind.

@AlonGvili make sure you include all tailwind dependencies (like tailwinds, @tailwindss/form into your dependencies not your dev dependencies because those will be running on the server. And fly.io image will strip all dev dependencies out of your docker image

I've updated the README to reflect this. For now, I'll consider this resolved

from remix-tailwind.