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

grobelDev

Dec 24, 2019·2 min read

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.

npx create-react-app react-tailwind-styled

Then cd into it.

cd react-tailwind-styled

Step 2: Install Necessary Packages

npm install --save styled-components &&
npm install tailwindcss &&
npm install --save-dev tailwind.macro@next &&
npm audit fix

Step 3: Setup config

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

touch babel-plugin-macros.config.js

Put this code inside of it:

// babel-config-macros.config.js
module.exports = {
  tailwind: {
    styled: "styled-components"
  }
};

Step 4: Test Installation

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

// App.js
import React from 'react';
import styled from 'styled-components';
import tw from 'tailwind.macro';// Style 1: Only requires the tw import.
const Spacer = tw.div`py-4`;
const Paragraph = tw.p`flex items-center py-8 justify-center text-xl text-white bg-blue-500`;// Style 2: Requires both the styled and tw imports.
const Container = styled.div`
  ${tw`flex justify-center`}
`;
const Button = styled.button`
  ${tw`px-8 py-4 text-xl font-semibold text-blue-700 bg-transparent border border-blue-500 rounded hover:bg-blue-500 hover:text-white hover:border-transparent`}
`;function App() {
  return (
    <div className='App'>
      <Spacer></Spacer>
      <Paragraph>
        Hello Create React App + Tailwind + Styled Components!
      </Paragraph>
      <Container>
        <Button>Button</Button>
      </Container>
    </div>
  );
}export default App;

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.