6
25 Comments

Anyone know of a good ReactJS + Tailwind boilerplate?

Hello!

I've started learning TailwindCSS and really love it!

However, the process of putting it in a ReactJS app takes some time and I think a boilerplate or CLI would speed this process up a lot.

If anyone knows of any resources or tools similar to this, that would be awesome.

Thanks again!

  1. 3

    I'm really curious about this question, I have seen it elsewhere too. The whole point of TailwindCSS is to reduce the effort to build/create your own UI style, that fosters your products identity.

    If you use someone else's styles you lose the core value of TailwindCSS. TailwindUI could rather have React components or boilerplate.

    1. 1

      Very true. That’s why I just want a tool that generates and imports Tailwind with create-react-app and doesn’t start anything design-wise for me. That’s my job. 😁

        1. 1

          Thanks for these helpful resource! 🙌

  2. 1

    I also think React and Tailwind CSS can be used in combination.

    I've built two boilerplate codes you can use for your projects:
    https://creativedesignsguru.com/demo/nextjs-landing-page/ and https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/

    One you can use for your landing page and another for your blog.

    The two starters are hosted on GitHub: https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template and https://github.com/ixartz/Next-js-Blog-Boilerplate

    Both have a least 100+ stars on GitHub.

  3. 1

    React and Tailwind are both very popular but somewhat less likely to be used together.

    Tailwind tends to be used more with server-rendered with minimal JS, with Alpine or with Vue. Some of this is because of the close fit of the model and some is because those are the things Adam Wathan tends to use (and has explained on his podcast, screencasts, etc)

    1. 1

      Very true. Thanks for the tips!

  4. 1

    I’m currently working on backend features and another SaaS app, but I think that by the end of November I’ll have a React version for NetcoreSaas. But you can see if my open sourced frontend suits your needs, although it’s Vue ;/

    1. 2

      Cool, thanks for letting me know!

  5. 1

    You already know about my template but here is a really good tutorial on how to integrate TailwindCSS in create react app :)

    https://daveceddia.com/tailwind-create-react-app/

    1. 2

      Yep, I used a tutorial like that to try out Tailwind today an it worked fine. I was just hoping to find a good CLI that combines CRA and Tailwind.

      Thanks and good luck on your product :D

  6. 1

    Yea, this exists. It's called Tailwind UI - made by the folks from tailwind css. They are also working on React and other framework implementations right now.

    1. 1

      Thanks for the resource. However like I've had to re-say a lot on this post, I just want a tool that generates and imports Tailwind with create-react-app and doesn’t start anything design-wise for me.

      Thanks anyway. I'll be sure to give TailwindUI a try :D

  7. 1

    Brayden I've seen a few posts of yours now and it looks like you're wanting something to work on, I have an idea.

    I use Grommet, but there are many other React component libraries out there (Rsuite, for example is another). They provide drop downs, search bars, lists, drop buttons, progress bars, etc

    What would be cool is one of these but prestyled with Tailwind.

    1. 1

      Thanks for the idea. I was really just trying to learn TailwindCSS today and was wondering if there was a boilerplate for it.

      I think your idea is great and I might make a modern button TailwindCSS react library.

      Thanks again :D

      1. 1

        You can probably learn it faster just using it by itself instead of in a react project.

        It's almost always easier to learn a new tool in isolation instead of inside another!

        1. 2

          Very true. Will keep this in mind! 👍

  8. 1

    Haven't tried it myself, but this looks like what you're asking for: https://dev.to/gigincg/react-tailwind-starter-3k7h

    1. 1

      Cool. I’ll be sure to check it out. 👍

  9. 1

    I think creative tim has something.

    1. 1

      Mike, I checked out the site but could only find templates. I only want a tool that generates and imports all necessary code. Not something that gives me a design already.

      Thanks anyways :)

      1. 1

        Ahhh . What about divjoy by @Gabe?

        I am not sure if with Tailwind...

        1. 2

          We don’t have Tailwind just support yet, but it’s coming! If you’re interested in grabbing it here’s a discount: divjoy.com?promo=indiehackers

          1. 3

            Thanks. I don’t I need a paid one right now, but will defiantly consider one of yours when I get to that point in my learning/projects.

Trending on Indie Hackers
After 10M+ Views, 13k+ Upvotes: The Reddit Strategy That Worked for Me! 42 comments Getting first 908 Paid Signups by Spending $353 ONLY. 24 comments I talked to 8 SaaS founders, these are the most common SaaS tools they use 20 comments What are your cold outreach conversion rates? Top 3 Metrics And Benchmarks To Track 19 comments Hero Section Copywriting Framework that Converts 3x 12 comments Join our AI video tool demo, get a cool video back! 12 comments