Sign in
Log inSign up

React + Tailwind CSS

Siddharth Vishvanath (Sid)'s photo
Siddharth Vishvanath (Sid)
·Oct 12, 2020·

2 min read

Hi Everyone,

I have been reading a lot about TailwindCSS and how to integrate it with a React app / Next app. I have found many articles in Hashnode and Dev.to very helpful in guiding me through the process.

So here I am to tell you about my experiences working with TailwindCSS and its benefits using it with a react app.

Tailwind CSS has recently had an update in its library, I was very excited to go through the latest changes in their documentation, and they also have a large community that adds a list of complex components/examples that you can make with TailwindCSS. I read the this blog where the writer gave a few handy links that you may need when working with Tailwind.

Here they are below:

  1. Tailwind Ink: https://tailwind.ink/
  2. Tailwind Blocks: https://mertjf.github.io/tailblocks/
  3. Tailwind Starter Kit: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/quick-start
  4. Stiches - HTML Template Generator: https://stitches.hyperyolo.com/
  5. Taiwind Typography: https://tailwind-typography-playground.vercel.app/
  6. Tailwind Playground: https://tailwind.run/new

By going through these links you can see the amount of examples that the community is providing every day is amazing. You can even use TailwindCSS with NextJS and I feel it would make a great combination. Nextjs is best to use when you want your page to be fast, tailwind can also work fast because it removes unused styles from the app and has many more advantages which makes them a good combination.

I have been experimenting with TailwindCSS with other libraries out there to see if I can customize some built-in components of that library. I feel that using Prime React with Tailwind is a good combination.

Let me know your thoughts about TailwindCSS and React, are they the best combination? What other libraries does Tailwind go well with?

5