18
30 Comments

First Website using TailWindCSS, Never going back!

Just started using Tailwind CSS for my first project.

It's so much better than bootstrap I'm shocked. Designed just became way easier. Also I love how convenient it is to use md:w-full and similar types of mobile responsive queries.

What a blessing, the hype is real.

You can check out my site: ReviewBolt.com to see how it came out.

  1. 4

    Hell yeah, Tailwind rocks.

    1. 2

      Couldn’t have said it better Mike!

  2. 2

    Oh wow - this is such a cool site. I'm guessing there may be other sites that provide this type of information, but still really interesting to see!

  3. 2

    I know right, TailwindCSS is amazing 😍. A quick tip: the icons in the middle section (next to the text) take an odd shape when scaling down the browser's viewport, make sure to use flex-shrink-0 on the icons to avoid that.

  4. 2

    In what way do you find it better than Bootstrap?

    1. 1

      I will try to answer this, forgive me if I don't catch the essence of TailWindCSS vs. Bootstrap.

      To start, there's a great feature with tailwind that you can easily apply hover css with pre-made classes. That was a huge pain for me in bootstrap making custom classes.

      Here's how:
      "cursor-pointer" means there will be a pointer on hover.

      "hover:underline" means that it will be underlined on hover.

      I love how bootstrap pioneered "p-3" that was amazing. But TailWindCSS takes it a step farther by adding "p-96" which actually comes in handy sometimes.

      It's just a more fun experience overall to code with.

      1. 1

        Got it, thanks. Sounds like the additional utility classes and customization are handy, that makes sense.

        I'm using Bootstrap right now which I'm happy with, and I'm developing in React so wherever Bootstrap is lacking, I just plug those holes with CSS-in-JS using Emotion. But I can definitely see the appeal of a utility first framework like Tailwind.

      2. 1

        Pardon my ignorance. What's amazing about p-3 ?

  5. 1

    I never knew boostrap I preferred Bulma and now I want to know TailwindCSS

  6. 1

    At GorillaSite we use Tailwind for all of our clients and we are in love. <3

    Here you can find the latest 100% Tailwind custom developments.

    And many others under construction.

    How do you see them? They like? I'd love to hear from you ... <3

  7. 1

    Nice work! I like how your site doesn't look like a ton of other out there. That is problem with Bootstrap I guess - no one seems to go 'outside the box' to do anything markedly different, but with Tailwind essentially forcing everyone to build components from the ground up, I think we will see a lot of variety. I particularly like the 'staggered' info boxes that don't all sit on a straight line in between your site sections.

    I rebuilt one of my old websites recently https://www.staffstatus.io but I admit I cheated a little and used TailWindUI kit.

  8. 1

    Where do you get your interactive components ? Like checkbox, button, tabs, etc.. you write the logic from scratch? That would be a lot of work.

    1. 1

      At Monitoro, we have the double curse of using Tailwind and Svelte, neither of them having premade components to the extent that we needed.

      The curse turned out to be a blessing in disguise. It forced us to think more about our visual identity and the UX of those components, and we only implemented the functionality that we need but exactly the way we wanted it. The result had a good tradeoff of quality and effort, you can check out a demo video of our app here (100% tailwind and svelte).

      Had we adopted say React and Material design or another set of components, our app would have been much more generic and less adapted to the task at hand. And we might still have spent time fighting the way the components were designed to achieve our desired result.

      Happy to share more about our learnings along this journey if you have questions.

      1. 1

        Thank you for the detailed answer. I checked Monitoro, the custom components you made for it looks great. However afaik all the major ui component libs (material ui, react strap, etc) are themable. They have been battle tested for year, and a lot of thought have been put into the api of each component. Personally, I would invest some time to restyle a premade lib according to my design system, I never tried that though so I dunno how easy that would be.

      2. 0

        If I can be candid, the app looks like it was made by a developer.

        UI/UX is hard work (been learning it for last 2 years and still far from perfect, especially when goal is to ship)

        TailwindUI is working on a React library.

        A vanilla JS library would also be huge as well.

        1. 1

          Thank you @volkandkaya for your candid feedback, although i’m not sure what I should understand from your choice of words.

          User testing has proven that our non technical users can understand the app, use it easily, discover features on their own and they feel its visual appearance to be welcoming.

          That’s all the validation we seek :)

  9. 1

    That was my impression for TailwindCSS as well and that's why I chose it for both the landing page and the product itself for SaaS Starter Kit (https://saasstarterkit.app/).

    I guess the benefits for me are:

    • Most of the time, I am trying to standardize the measurements for my custom CSS anyway, Tailwind takes care of this automatically for me.
    • I usually need to take care of building a nice color palette, Tailwind takes care of this too.
    • The syntax for responsive CSS is cumbersome and it makes it hard to experiment with different responsive styles. With Tailwind and its md: formatted classes, it is very easy.
    • It is as easy as writing inline styles, but thanks to the limited options you have with the classes, it is very easy to experiment and build prototypes while still keeping things looking good.
    • The tooling is constantly improving, and they have plenty of good examples on their websites to build common components.
    • Great documentation.

    I have tried different frameworks like Bootstrap as well as building my custom styles from scratch, and I have found the best productivity by far using Tailwind. I'd strongly suggest it to anyone considering building a new website.

  10. 1

    Love the UI Cedric. Very informative website. Just a small suggestion in product details page for the top sticky bar if you can provide small from left it will look neat. Kudos great work 👏👏

  11. 1

    Why do I get “An unexpected error has occurred.” after entering a site URL

    1. 1

      Okay so I'm guessing it's postmodernwork.com :)

      I just deployed a fix. Btw love the blog totally agree with your thoughts, I'm now a subscriber.

      1. 1

        that's the one:) thanks! great tool, time for some competitor stalking.

    2. 1

      Yea it'll do that sometimes! Can you share the url you used? That would really help me fix it :)

  12. 1

    Congrats, site looks great!

  13. 1

    How hard using TailwindCSS for me that mostly just integrating HTML with backend part?

    1. 1

      I'm using Next.JS and it took about 1 hour to read the proper documentation online. I got stuck with purging the unused CSS. But there's tons of good blog posts online on how to fix it.

  14. 0

    I don't get the hype. It's like adding a markup language on top of another markup language without any validation. Plus it's completely unreadable.

    1. 2

      It's only completely unreadable if you haven't used it before. It takes a little time, but once you know it, then it's fantastic. As you use it more, as everything is strictly shorthand for pure CSS, it improves your actual CSS skills. When you end up building components, it's easier and non-repetitive. With postcss and purge, you end up with an incredibly small CSS file compared to something like bootstrap.

      1. 2

        There's this nifty VS Code extension that makes the experience even better, it auto sorts your tailwind classes so you acquire a certain "muscle memory".

        https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

  15. 1

    This comment was deleted 3 years ago.

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? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 17 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments