In this article, we are going to combine the use of Tailwind CSS, Styled Components, and Custom CSS in our Next.js Application.

This can give you the flexibility you desire in syncing these tools to serve your needs when building a Next.js app.

I am going to guide you through each process, so you don't have to worry or panic.

Prerequisite

• Basic knowledge of React.Js library.

• Basic knowledge of Next.Js library.

That's all you need. Let's dive in.

Setting up a new Next.js project

We'll start by creating a new Next.js project. All we need to do for this is run the following command.

npx create-next-app my-project

cd my-project

We'll also have to install the following packages;

Setting Up Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

You can finish the setup for Tailwind here.

After completing the setup from the docs, we will proceed to install the next package;

npm i styled-compoments

That's all you need to begin. You will need to start the following command to start your Next.js app.

npm run dev

Configuring Styled components

Before proceeding we will have to configure Babel into our project.

npm install --save-dev babel-plugin-styled-components

After the package installs successfully, You will create a .babelrc file and put the following code within it.

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

Then, In the root folder we are going to create a _document.js file and add the following code;

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

And in your _app.js you should edit it to this;

import './globals.css';

import { createGlobalStyle, ThemeProvider } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`

const theme = {
  colors: {
    primary: '#0070f3',
  },
}

export default function App({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

This should complete the setup for Styled-component in our Next.js App

Using Custom CSS

In our styles folders, we have the global.css file which is imported into the _app.js file.

You will be editing the global.css and importing the CSS modules in this manner.

@import './Home.module.css';  
@import 'tailwindcss/tailwind.css';


@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Your index.js should be looking like this now

import styled from 'styled-components';


export const Home = () => {
  return (
    <Wrapper>
          <Details>
            <h2 className="Home">Hello</h2>
            <p className="text-gray-500 font-normal mt-1">
               This works!!
          </p>
          </Details>
        </>
    </Wrapper>
  );
};


const Wrapper = styled.div`
  position: relative;
`;

const Details = styled.div`
  flex: 1;

  @media (max-width: 768px) {
    display: flex;
    flex-direction: column-reverse;
  }
`;

Your Home.module.css file should look like this;

.Home {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

We have successfully used Tailwind CSS, Styled Components, and Custom CSS in our Next.js Application.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter.