I cant get tailwind to run

[emeidell]

I can't seem to get tailwind working. I have tried the instructions from the docs, youtube, and a blog post I found and nothing seems to get it running. Its almost like I am missing a step that is just not documented. Everything runs just fine and no errors but nothing I do gets the styling picked up.
I have now done this on 3 projects so I know its not something weird about my first install. Remix v1.1.1
npx init, fly.io deployment, typescript, install deps
-> npm install -D tailwindcss ("^3.0.7")
-> init tailwind, update config, update root.ts, add tailwind.css file, add tailwind scripts, add classes to index route
-> Run both remix in dev and the tailwind scripts in parallel
= fully rendered but no style updates no errors.

These are all the different tutorials I followed.
https://remix.run/docs/en/v1/guides/styling#tailwind
https://sergiodxa.com/articles/using-tailwindcss-with-remix
https://www.youtube.com/watch?v=AsqW7Ghs7nc

[sergiodxa]

So you have the Links component rendered in your root route? Probably inside a Document component rendered there.

If you have it, could you create a reproduction example app in a repo or in https://remix.new so I could try it?

[emeidell]

Yeah, i forgot to mention that I added it to the root. This is as far as I can tell identical to my local copy.
https://stackblitz.com/edit/node-zs5bsd?

[universse]

From the steps you described, I think you may have forgotten to import the output tailwind.css file and add it to the links function. Also, the article and youtube video linked are for Tailwind v2.

[emeidell]

I mentioned in another comment that I did add it to the links func I just forgot to mention it in my comments. I did try both v2 and v3 with no luck.

[universse]

hm maybe you can check the output css file if the class names added to components are generated, then inspect the html and network request to see if the linked css file is loaded properly.

[arvigeus]

Maybe this will help?

https://github.com/one-aalam/remix-starter-kit

[emeidell]

This is helpful! I would still like to figure out what I messed up so I can request a change in the docs to make it more clear for others.

[emeidell]

I can't spell, stylesheet not stylesheets. Everything is working just fine after that. Not sure if that would be worth adding error handling there but that just wasted more time than I would like to admit.

[arvigeus]

I am on the same boat here! Even posted an angry rant on Twitter about something that was partially my fault.

[emeidell]

Finding things like this is probably the most frustrating part of development. 😆 I'm glad you found your issue as well!

[tigerabrodi]

I also had some problems related to Tailwind when setting it up from scratch, guess what, I miss spelled something in the scripts 😆

[davnicwil]

Amazing... just spent literally an hour on this. New to tailwind and trying it out while playing around with Remix.. probably my first mistake 😆 Copied the docs exactly... just did not work at all. Came across this thread early and thought "no this can't possibly be happening to me, I literally copy pasted everything".

1 hour later... yup, so I typoed the config file name taliwind.config.js - literally the one thing I had to type 😂 Change that and all works flawlessly.

Gotta love software development.