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:
Do you have any experience with Tailwind CSS?
I wonder if buying Tailwind UI elements is necessary to save time, or can one build their own elements fairly easily?
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.
Yes. We are using Tailwind for years, even before ver 1
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.
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.
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!
reviving this thread for anyone else who stumbled upon it.
Do you have any experience with Tailwind CSS?
Yup, we have used it on two rails/turbo mobile app projects. It pairs very nicely with the HTML first approach.
I wonder if buying Tailwind UI elements is necessary to save time, or can one build their own elements fairly easily?
I have it and mainly use it for little bits of styling I don’t care much to think deeply about (how a pill/dropdown looks etc).
For entire workflows/pages, you and your customers will be much better off thinking through the story you want to tell (rather than copying their full page layouts).
Any tips you want to share on this subject?
Tailwind is like painting directly onto a canvas, brush stroke by brush stroke. You can start styling a button with bg-blue-500 p-4 and then very quickly experiment and land on bg-gradient-to-b from-blue-400 to-blue-800 px-4 py-2. It’s crazy how quickly you can iterate without thinking about pixel perfect padding etc.
Biggest tip would be to encourage designers to apply their designs “in medium” - designing directly onto the canvas with tailwind inside rails views. You can use tailwind without understanding how CSS works, which I think is pretty awesome having had to understand how CSS works over the last 7 years.