How to use Tailwind CSS with styled-components

Tailwind is a utility-first CSS framework for building custom designs. It's highly customizable and provides you all the necessary building blocks you need to build a design.

My favorite approach to style React components is CSS-in-JS. With styled-components, I can utilise tagged template literals to write actual CSS code to style my components. That's why I thought to combine the Tailwind experience with the React component model.

Installation

To get started, you need to install Tailwind and styled-components:

npm install tailwind.macro@next --save
npm install styled-components --save

Configuration

Once tailwind macro is installed, we need to add a babel-plugin-macros.config.js file in the root folder of our project. Then we need to tell tailwind macro to use the styled-component macro.

module.exports = {
  tailwind: {
    config: "./src/tailwind.config.js",
    styled: "styled-components/macro",
  },
};

This is all we need in order to write Tailwind classes inside a styled component. However, if you want to add additional Tailwind features, you can create an optional JavaScript configuration file:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Implementation

Now is the time to create our React component and styled it using the styled-components approach together with Tailwind classes:

import React from "react";
import styled from "styled-components/macro";
import tw from "tailwind.macro";

// styles
const Header = styled.header`
  ${tw`bg-black min-h-screen flex flex-col items-center justify-center text-xl text-white`};
`;

const Test = () => (
  <div css={tw`text-center`}>
    <Header>
      <p css={tw`text-blue-300`}>
        Using <code>Tailwind</code> and <code>styled-components</code> together.
      </p>
    </Header>
  </div>
);

export default Test;

For more information, you can have a look at Tailwind and styled-components official documentation.