9
12 Comments

Interactive example of building components with TailwindCSS

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.

Click here to see live example

  1. 3

    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.

    1. 1

      Thanks for the detailed feedback. I'll try to incorporate some kind of highlighting of changes or some alert window with description.

  2. 1

    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.

    1. 1

      Thanks for the feedback, I added a playback speed controller to change the speed. Let me know if this help

  3. 1

    This is pretty impressive! TailwindCSS is already making it so easy to design awesome sites and this will be a really handy tool.

  4. 1

    This is really helpful! Thanks for the example.

    1. 1

      I made an account just to agree with this. I've been searching for more tailwind resources for like a week!

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 15 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments