I'm doing an experiment of interactive example of building UI components with TailwindCSS. Would love some feedback on it, please let me know if its useful at all or any other ideas on how to improve it.
This is really excellent. What a fantastic learning tool for finding out how various Tailwind attributes work. Going from simple bare bones to fully chromed out is really eye opening.
Really, the only thing I can suggest is to have some sort of indicator over on the right hand side showing which section is being worked on right now. With the major <DIV> changes, it was really obvious, but with the subtler changes to the form field labels etc., sometimes I was wondering what change was happening.
Maybe if you introduced a slight delay in between each major change, or had a narration or an alert window up the top on the right, which says something like "Let's split the form into three columns now" and then "Ok, let's make the entry fields look nicer with a blue background and rounded corners...". This at least sets the expectation and lets the user know where to focus their attention on while the changes are being made.
Breaking it up into section may also help the user to stop and go back and repeat certain sections that are of more interest, and skip past those that aren't?
But overall - I think you have built a fantastic resource here. I would definitely use it once production ready.
This is a really cool idea - for a bit of feedback, it would be really helpful if you could slow down the playback (either change the default speed, or add a UI control to let the user change the playback speed). The current playback speed is too fast to follow, and kinda gave me a headache.
This is really excellent. What a fantastic learning tool for finding out how various Tailwind attributes work. Going from simple bare bones to fully chromed out is really eye opening.
Really, the only thing I can suggest is to have some sort of indicator over on the right hand side showing which section is being worked on right now. With the major <DIV> changes, it was really obvious, but with the subtler changes to the form field labels etc., sometimes I was wondering what change was happening.
Maybe if you introduced a slight delay in between each major change, or had a narration or an alert window up the top on the right, which says something like "Let's split the form into three columns now" and then "Ok, let's make the entry fields look nicer with a blue background and rounded corners...". This at least sets the expectation and lets the user know where to focus their attention on while the changes are being made.
Breaking it up into section may also help the user to stop and go back and repeat certain sections that are of more interest, and skip past those that aren't?
But overall - I think you have built a fantastic resource here. I would definitely use it once production ready.
Thanks for the detailed feedback. I'll try to incorporate some kind of highlighting of changes or some alert window with description.
This is a really cool idea - for a bit of feedback, it would be really helpful if you could slow down the playback (either change the default speed, or add a UI control to let the user change the playback speed). The current playback speed is too fast to follow, and kinda gave me a headache.
Thanks for the feedback, I added a playback speed controller to change the speed. Let me know if this help
Looking good 🎉
Thanks!
This is pretty impressive! TailwindCSS is already making it so easy to design awesome sites and this will be a really handy tool.
Thanks
This is really helpful! Thanks for the example.
Thank you!
I made an account just to agree with this. I've been searching for more tailwind resources for like a week!
https://www.tailwindtoolbox.com/