Setup Tailwind with Styled-Components in Create-React-App in 5 Minutes

Instructions for setting up a starter project using Create React App (CRA) + Tailwind CSS with Styled-Components as a CSS-in-JS solution.

Step 1: Create-React-App

Create your project directory with create-react-app.

Then cd into it.

Step 2: Install Necessary Packages

Step 3: Setup config

Create a babel-plugin-macros.config.js file at the root of the project.

Put this code inside of it:

Step 4: Test Installation

Done! Try testing your installation with this App.js code.

The completed repo can be found here:

The end result should look something like this:

You can find my other articles at:
https://grobel.dev

Thanks for reading.

If you’re interested in more stuff that I’ve written, you can find them at https://grobel.dev/articles. Thanks for reading.

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