---
title: "Setup Nextjs Tailwind CSS Styled Components with TypeScript"
description: "In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript."
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript
---

# Setup Nextjs Tailwind CSS Styled Components with TypeScript

## Introduction

In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript, and we will use the following tools:

- Nextjs
- Tailwind CSS
- Styled Components
- TypeScript

## Prerequisites

You need to have the following tools installed on your system:

- Node.js
- Yarn

## Setup Nextjs App

### Step 1: Create a Nextjs app

First, we will create a Nextjs app using the following command:

```shell
# Create a Nextjs app
yarn create next-app nextjs-tailwind-styled-components-typescript
```

Then, you will be asked to choose a TypeScript and ESLint, choose the following options:

```shell
# Choose a TypeScript
✔ Would you like to use TypeScript with this project? … No / Yes # Choose Yes

# Choose a ESLint
✔ Would you like to use ESLint with this project? … No / Yes # Choose Yes
```

### Step 2: Go to the Nextjs app directory

After creating the Nextjs app, we need to go to the Nextjs app directory using the following command:

```shell
# Go to the Nextjs app directory
cd nextjs-tailwind-styled-components-typescript
```

### Step 3: Prepare the Nextjs app

First, we need to install the following dependencies:

```shell
# Install the following dependencies
yarn add -D eslint-config-prettier eslint-plugin-prettier prettier
```

Next, we need to create a `.npmrc` file in the root directory of the Nextjs app, and we will add the following content to the `.npmrc` file:

```shell
# Create a .npmrc file
touch .npmrc
```

```yaml
# Add the following content to the .npmrc file
shamefully-hoist=true
engine-strict=true
save-exact = true
tag-version-prefix=""
strict-peer-dependencies = false
auto-install-peers = true
lockfile = true
```

After, we need to create a `.nvmrc` file in the root directory of the Nextjs app, and we will add the following content to the `.nvmrc` file:

```shell
# Create a .nvmrc file
touch .nvmrc
```

```yaml
# Add the following content to the .nvmrc file
lts/fermium
```

Then, we need to create a `.yarnrc` file in the root directory of the Nextjs app, and we will add the following content to the `.yarnrc` file:

```shell
# Create a .yarnrc file
touch .yarnrc
```

```yaml
# Add the following content to the .yarnrc file
--install.ignore-engines true
```

Then, we need to create a `.prettierrc` file in the root directory of the Nextjs app, and we will add the following content to the `.prettierrc` file:

```shell
# Create a .prettierrc file
touch .prettierrc
```

```json
# Add the following content to the .prettierrc file
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}
```

Then, we need to create a `.prettierignore` file in the root directory of the Nextjs app, and we will add the following content to the `.prettierignore` file:

```shell
# Create a .prettierignore file
touch .prettierignore
```

```yaml
# Add the following content to the .prettierignore file
.yarn
.vscode
.next
dist
node_modules
```

Then, we need to create a `.eslintrc` file in the root directory of the Nextjs app, and we will add the following content to the `.eslintrc` file:

```shell
# Create a .eslintrc file
touch .eslintrc
```

```json
# Add the following content to the .eslintrc file
{
  "extends": ["next", "next/core-web-vitals", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }]
  }
}
```

Then, we need to create a `.eslintignore` file in the root directory of the Nextjs app, and we will add the following content to the `.eslintignore` file:

```shell
# Create a .eslintignore file
touch .eslintignore
```

```yaml
# Add the following content to the .eslintignore file
.yarn
.vscode
.next
dist
node_modules
```

Add, the engines field to the `package.json` file, and we will add the following content to the `package.json` file:

```json
# Add the following content to the package.json file
{
  "engines": {
    "node": ">=16.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },
}
```

### Step 4: Install Tailwind CSS

First, we will install Tailwind CSS using the following command:

```shell
# Install Tailwind CSS
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

Then, we will create a Tailwind CSS configuration file using the following command:

```shell
# Create a Tailwind CSS configuration file
npx tailwindcss init -p
```

After, we will change the `tailwind.config.js` file, and we will add the following content to the `tailwind.config.js` file:

```js
// Add the following content to the tailwind.config.js file
/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### Step 5: Install Styled Components

First, we will install Styled Components using the following command:

```shell
# Install Styled Components
yarn add styled-components

# Install Styled Components TypeScript
yarn add -D @types/styled-components

# Install Styled Components Babel Plugin
yarn add -D babel-plugin-styled-components
```

Then, we will create a `.babelrc` file in the root directory of the Nextjs app using the following command:

```shell
# Create a .babelrc file
touch .babelrc
```

Then, we will add the following code to the `.babelrc` file:

```json
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}
```

### Step 6: Install and Setup `twin.macro`

First, we will install `twin.macro` using the following command:

```shell
# Install twin.macro
yarn add twin.macro

# Install twin.macro Babel Plugin
yarn add -D babel-plugin-twin
```

Then, we will add the following code to the `.babelrc` file:

```json
{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ],
    [
      "babel-plugin-twin",
      {
        "debug": false,
        "styled": "styled-components"
      }
    ],
    "babel-plugin-macros"
  ]
}
```

Add, the `babelMacros` field to the `package.json` file, and we will add the following content to the `package.json` file:

```json
# Add the following content to the package.json file
{
  "babelMacros": {
    "twin": {
      "styled": {
        "import": "default",
        "from": "styled-components"
      }
    }
  }
}
```

### Step 7: Setup `_document.tsx`

First, we will create a `pages/_document.tsx` file using the following command:

```shell
# Create a pages/_document.tsx file
touch pages/_document.tsx
```

Then, we will add the following code to the `pages/_document.tsx` file:

```tsx

  DocumentContext,
  Head,
  Html,
  Main,
  NextScript,
} from 'next/document';

  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

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

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

  render() {
    return (

          <meta name="theme-color" content="#000000" />

        <body>

        </body>

    );
  }
}
```

### Step 8: Setup `_app.tsx`

We will add the following code to the `pages/_app.tsx` file:

```tsx

const _App = ({Component, pageProps}: AppProps) => {
  return (
    <>

        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />

      ;
    </>
  );
};

```

### Step 9: Start styling

We will create a `styles` directory in the root directory of the Nextjs app using the following command:

```shell
# Create a styles directory
mkdir styles
```

Then, we will create a `main.ts` file in the `styles` directory using the following command:

```shell
# Create a styles/main.ts file
touch styles/main.ts
```

Then, we will add the following code to the `styles/main.ts` file:

```ts

  flex
  min-h-screen
  flex-col
  items-center
  justify-center
  py-2
`;

  flex
  w-full
  flex-1
  flex-col
  items-center
  justify-center
  px-20
  text-center
`;

  text-6xl
  font-bold
`;

  text-blue-600
`;

  mt-3
  text-2xl
`;

  rounded-md
  bg-gray-100
  p-3
  font-mono
  text-lg
`;

  mt-6 flex
  max-w-4xl
  flex-wrap
  items-center
  justify-around
  sm:w-full
`;

  mt-6
  w-96
  rounded-xl
  border
  p-6
  text-left
  hover:text-blue-600
  focus:text-blue-600
`;

  text-2xl
  font-bold
`;

  mt-4
  text-xl
`;

  flex
  h-24
  w-full
  items-center
  justify-center
  border-t
`;

  flex
  items-center
  justify-center
  gap-2
`;
```

Then, we will redisign the `pages/index.tsx` file using the following code:

```tsx

  Container,
  Main,
  Title,
  TitleLink,
  Description,
  DescriptionCodeHighlight,
  Cards,
  Card,
  CardTitle,
  Footer,
  FooterCopyRight,
} from '../styles/Home.styles';

const HomePage: NextPage = () => {
  return (

          Welcome to Next.js!

          Get started by editing{' '}
          pages/index.tsx

            Documentation &rarr;
            <p>Find in-depth information about Next.js features and API.</p>

            Learn &rarr;
            <p>Learn about Next.js in an interactive course with quizzes!</p>

            Examples &rarr;
            <p>Discover and deploy boilerplate example Next.js projects.</p>

            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>

          Powered by{' '}

_Vercel Logo_

  );
};

```

## Source Code

The source code for this tutorial is available on [GitHub](https://github.com/MKAbuMattar/nextjs-tailwind-styled-components-typescript)

## Live Demo

The live demo for this tutorial is available on [Vercel](https://nextjs-tailwind-styled-components-typescript.vercel.app/)

## Conclusion

In this tutorial, we have learned how to use Tailwind CSS with Nextjs and Styled Components. We have also learned how to use TypeScript with Nextjs and Styled Components.

## References

- [Next.js Official Documentation](https://nextjs.org/docs)
- [Tailwind CSS Official Documentation](https://tailwindcss.com/docs)
- [Styled Components Official Documentation](https://styled-components.com/docs)
- [TypeScript Official Documentation](https://www.typescriptlang.org/docs/)
- [twin.macro GitHub Repository](https://github.com/ben-rogerson/twin.macro)
- [Next.js with TypeScript](https://nextjs.org/docs/basic-features/typescript)
- [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
- [Styled Components: Advanced Usage - Next.js](https://styled-components.com/docs/advanced#nextjs)
- [Babel Official Website](https://babeljs.io/)
- [ESLint Official Website](https://eslint.org/)
- [Prettier Official Website](https://prettier.io/)
- [Yarn Package Manager](https://yarnpkg.com/)
- [Node.js Official Website](https://nodejs.org/)
- [Vercel Platform](https://vercel.com/)
- [Source Code for this tutorial on GitHub](https://github.com/MKAbuMattar/nextjs-tailwind-styled-components-typescript)