Tailwind CSS installation with Next.js and Styled Components

I recently had the pleasure of working with Tailwind CSS. It's a utility-first CSS framework that allows me to create styles for apps and websites really quickly and efficiently.

I am using it along with Next.js framework and Styled Components. So I am going to go over the installation process and how to get started with it. This tutorial assumes some knowledge of React, JavaScript, and some CSS.

First, you will need to create Next.js application:

yarn create next-app example

Since I am using with a CSS-in-JS library, I found another library that helps with bootstrapping of Tailwind CSS within Styled Components context that's called twin.macro

Once Next.js application installed cd into it and install dependencies that we will need

cd example
yarn add tailwindcss postcss autoprefixer twin.macro styled-components

Add development dependencies to enable backtick syntax:

yarn add -D babel-plugin-macros babel-plugin-styled-components

Create configuration file for babel macros called babel-plugin-macros.config.js with following content:

module.exports = {
  twin: {
    preset: 'styled-components',
  },
};

Create .babelrc file in your project to override default values:

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "babel-plugin-macros",
    [
      "styled-components",
      {
        "pure": true,
        "ssr": true
      }
    ]
  ]
}

Go ahead and modify your _app.js to use GlobalStyles wrapper component from twin.macro like so:

import React from 'react';
import { GlobalStyles } from 'twin.macro';

const App = ({ Component, pageProps }) => (
  <>
    <GlobalStyles />
    <Component {...pageProps} />
  </>
);

export default App;

Initialize Tailwind CSS configuration file by running a command:

npx tailwindcss init

Create next.config.js file in the root of the project to get rid of annoying error with fs module:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.node = { fs: 'empty' };
    }

    return config;
  },
};

We are getting close over here, go ahead and start the development server

yarn dev

And let's try to create some sample components with this new syntax. Remove initial welcome message code from index.js and add this code right there instead:

import React from 'react';
import tw, { css } from 'twin.macro';

export default function Index() {
  return (
    <div
      css={[
        css`
          height: 100vh;
        `,
        tw`bg-black text-white text-2xl flex justify-center items-center`,
      ]}
    >
      Hello, World!
    </div>
  );
}

The syntax will take a little bit of time to get used to, but basically what we are doing over here is defined one small div with text in it and applying styles to it through helper css prop which can be an array, so we can add multiple styles in there. The first one obviously defines the height of this div, second is the actual Tailwind CSS classes which makes background color black, changes font color, increases the font size, and puts in the center.

And that's it!

Hopefully, you were able to follow and finish up the setup!