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.

// babel-plugin-macros.config.js
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:

// src/tailwind.config.js
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:

// src/pages/test.js
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.