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.

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.

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

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:

To learn more about React, here is their documentation.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store