The fastest way to get started with Tailwind CSS with React.js

Tailwind CSS can often be a bit of a headache to set up, especially with frameworks such as React. However, there is an extremely simple way to create a new React.js project with all the boilerplate code for tailwind already taken care of.

Similar to when you create a new React project and you run the npx command ‘create-react-app’, we are simply going to run the npx command that creates a react and tailwind app instead.

npx create-react-tailwind-app

After running this command you should see the following…

Enter in whatever you want your project to be called and voila! Your new React and Tailwind project has been created. Now cd into your project directory (in this case I called it “tutorial”) and run ‘npm install’ to install all necessary dependencies.

cd tutorial
npm install

Once your dependencies are done installing you can start up a local server for your new project.

npm start

And just like magic your new React app set up with tailwind is up and running!

Beautiful! Now the world is yours on what you can create combining the powers of React and Tailwind. Super quick and easy way to set everything up.

To learn more about Tailwind CSS, check out their documentation:

Documentation - Tailwind CSS

To learn more about React, here is their documentation.

Getting Started - React