Set up Tailwind + React in less than 1 minute

By the time you reach here, you must have already seen a bunch of articles explaining how to get started with two popular frameworks in the current era, Create React App (CRA) and TailwindCSS. But you may not be satisfied with their approach as it is just too much of a configuration.

The lack of visibility from the CRA team about integrating TailwindCSS, adds further confusion. I personally prefer TailwindCSS in almost all projects. It is great, smart, intuitive, and performance-friendly when used with its purge option.

Luckily, there is the official documentation on TailwindCSS that explains its integration with CRA. But c’mon, we’re new-age developers, we don’t have time to read everything. We quickly want to set up a perfect combination with a community-recommended approach.

Introducing the “reactwind” template

It is easy to setup and follows the official tailwind guidelines to integrate with the CRA.

How?

Go to your terminal and hit the following:

npx create-react-app my-app --template reactwind

Well yes, that’s it. Your React application is ready to rock with the best Utility-First CSS framework.

Why use this template?

This template is and will always follow the official community guidelines to set up the new project. Any updates and enhancements will be shipped with the new release.