Understand Tailwindcss install and use

[whitehome]

I am new to Rails and Tailwindcss. I set it up on my Mac Laptop and have it working. I tried to use a background color bg-orange-200 which did not work while other background colors such as bg-gray-200 did work. Everything I could find searching on the web made me think it should work. That's when I started searching for the actual css files where the css definitions exist. The long and short is I really got into how complex the relationship between components is and how much I need to learn. So I decided to start with my tailwinds install and configuration. So much for the explanation about how I got here.

I finally found where the css file existed and found that bg-orange-200 is not in those css files, that solved the why question but I found that I might have three tailwindcss packages installed so now I want to clean this up and doing this is where I would like advice and help. Please be kind as I am learning so I may not immediately know commands or terms not explained, however I will research them to understand. So here is what I have:

npm list produces the following:

error code ELSPROBLEMS
error invalid: tailwindcss@npm:@tailwindcss/postcss7-compat@2.2.8 /Users/mike_home/node_modules/tailwindcss

yarn list produces the following:

warning package.json: No license field
...
@tailwindcss/postcss7-compat@2.2.17
...
tailwindcss@2.2.17

Ok I see the I have apparently installed tailwindcss under npm and yarn. Now I want to have only one package installed by one package manager. As far as I can tell npm or yarn are ok and as is the case many times folks use the package manager they are most familiar with. In my case I am not attached or familiar with either yarn or npm. So my thinking is remove the npm tailwinds install. Then get educated about the yarn install and understand what I am seeing between the @tailwindcss/postcss7-compat@2.2.17 and tailwindcss@2.2.17 output lines. My first question is, are they the same install or different installs even though the versions are the same?

Finally, I have @import "tailwindcss/base"; ...utilities, and ...components in a rails file app/javascript/stylesheets/application.css. My research has led be to conclude I need to reinitialize my rails css cache after cleaning up my tailwindcss install. If you could point me to that process it would really save me some time and make sure I don't do unnecessary and duplicated processes again.

If more information is needed I'll be glad to provide it.

Thanks in advance for your help.

[whitehome]

Ok I think I have this figured out! As has been my experience searching for answers, you never know where the answer will come from. I am an old retired software guy and as such started on Mainframes DOS, VM and MVS back when microfiche and printed manuals were where answers came from. Today I spend hours searching the web for those answers and so many times its hard to find that correct search string to get that answer. Today my answer came in a simple paragraph from a guide to NPM. My research pointed to the fact that NPM and Yarn both use the same repository directory and the package.json file so I started looking for why and what the relationship was. Then the answer came! Same repository different clients! Well it had to be, after what I was seeing. Additionally, I found that my tailwindcss is installed globally and my tailwindcss forms is installed locally in my rails project directory marked private true. I just got the rails working and now that I am trying to understand how it all fits together I see how things fit and the bad things I did just following someones instructions. I'll have to think about how to avoid doing that in the future.

[lostmachinesxyz]

Great that you already managed to figure it out! This video series would also help you provide some of the context you might be missing - https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0. It is called "Tailwind CSS: From Zero to Production", it is 1 hour long, and is by the people behind Tailwind.

A lot of web development keeps changing, so you'll get conflicting advice everywhere. But if you feel overwhelmed, then you can start with Next.js + Tailwind. You can later switch to using something else too, but it'll give you a good sense of where web development is at today. Plus, it is easy to find high quality tutorials on YouTube for that combination.

[whitehome]

Thanks for the good info, I really appreciate you effort. Regards, Mike

…

On Jan 13, 2022, at 12:47 AM, lostmachinesxyz ***@***.***> wrote: Great that you already managed to figure it out! This video series would also help you provide some of the context you might be missing - https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0 <https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0>. It is called "Tailwind CSS: From Zero to Production", it is 1 hour long, and is by the creator of Tailwind. A lot of web development keeps changing, so you'll get conflicting advice everywhere. But if you feel overwhelmed, then you can start with Next.js + Tailwind. You can later switch to using something else too, but it'll give you a good sense of where web development is at today. Plus, it is easy to find high quality tutorials on YouTube for that combination. — Reply to this email directly, view it on GitHub <#6933 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADX3P2O7VXEFLSL7XJ4OX53UVZ7PJANCNFSM5LMZD2AA>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.