Tailwind CSS + Rails

[iraszl (Ivan Raszl)]

Yesterday I started learning Tailwind CSS. I used DHH’s gem to install it under a Rails 6.1 site. It took literally minutes from zero, and I was up and running.

Tips for anyone learning:

• The tailwind settings are located in: /app/javascript/stylesheets/tailwind.config.js
• Delete all scaffold css files from the app/assets/stylesheets/ folder as they break tailwind
• If you use HAML like I do, some classes that use the special character ‘/’, which can’t be applied directly, so you need to do this: .various.classes.here{style: "w-1/2"}, which is somewhat annoying but works and it’s quite rare anyway

I’m loving it so far, and considering switching from Bootstrap for any new sites I build once I’m proficient enough.

Questions:

1. Do you have any experience with Tailwind CSS?
2. I wonder if buying Tailwind UI elements is necessary to save time, or can one build their own elements fairly easily?
3. Any tips you want to share on this subject?

[coopeu (Ferran Cabrer i Vilagut)]

A pair of years using it from Semantic UI. After buying look first at the free available templates There is a lot courses and videos to learn easily and quickly Attention of versioning upgrade and personalisation theme can be both complex and breaking down all webpack configuration.

[dixpac (Dino)]

Hey Ivan!

1. Do you have any experience with Tailwind CSS?

Yes. We are using Tailwind for years, even before ver 1

2. I wonder if buying Tailwind UI elements is necessary to save time, or can one build their own elements fairly easily?

I would say it dependes, on your team. If you have good CSS knowledge you don’t need to buy TailwindUI, it is just package of already designed “components/pages”, nothing magical there.

3. Any tips you want to share on this subject?

Don’t forget to purge(Webpacker: Basic purging patterns by dixpac · Pull Request #40 · rails/tailwindcss-rails · GitHub) in production environment.

Coming from Bootstrap, resist the temptation to extract too many css comopnents, follow utility approach. Extract only small subset of components, such as buttons, form inputs, etc.

[Eric-Guo]

Already built one site in tailwindcss last year, starting from Tailwind UI (0.1.3). I would recommend buy TailwindUI if possible, TailwindUI can save your some time, but best part is can support the TailwindCSS development.

My experience of the tailwind css project, after 6 month development, I think it takes at least 3 times compare with using Bootstrap, because you have to build every component from scratch while the bootstrap already given you the default looking.

But I have to say Tailwind CSS can having way more design feeling than bootstrap, because there is too many bootstrap sites already.

So I don’t think below statement can stand on every project.

switching from Bootstrap for any new sites

I would rather to say if my client can give enough time and resource I’m very glad to using Tailwind CSS rather than Bootstrap, but if the budget is not enough, no way!

[iraszl (Ivan Raszl)]

Thanks guys, very useful feedback!

[aww]

1. I used tailwind for Next.js before, but just started using it Rails.
2. I haven’t tried buying Tailwind UI. I like Tailwind’s ability to build anything you want with it. So I didn’t feel any need to buy one yet.