---
title: "Setup Nextjs Tailwind CSS Styled Components with TypeScript"
lang: "en"
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/post/setup-nextjs-tailwind-css-styled-components-with-typescript
---

![Blog post image for Setup Nextjs Tailwind CSS Styled Components with TypeScript - In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript.](/_astro/hero.BP7GbA0g_ZBQEi6.webp)

[Home](/)›[Blog](/blog)›[All Categories](/blog/categories)›[Next.js](/blog/categories/nextjs)

Blog

[Prev in Next.jsReact Context API for State Management](/blog/post/react-context-api-state-management)

[Next.js](/blog/categories/nextjs)[Tailwind CSS](/blog/categories/tailwind-css)[Styled Components](/blog/categories/styled-components)[TypeScript](/blog/categories/typescript)[Frontend Development](/blog/categories/frontend-development)

# Setup Nextjs Tailwind CSS Styled Components with TypeScript

[Mohammad Abu Mattar](/authors/mohammad-abu-mattar)Published: 08 Nov 202205 Mins read05 Mins listen

[Markdown for AI(opens in a new tab)](/post/setup-nextjs-tailwind-css-styled-components-with-typescript/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool")

TL;DR

In this post, we will setup Nextjs Tailwind CSS Styled Components with TypeScript.

Series

[Frontend Essentials](/series/frontend-essentials)1/3

[NextReact With Redux Toolkit](/blog/post/react-with-redux-toolkit)

All posts in this series (3)

Blog3

1.  [Setup Nextjs Tailwind CSS Styled Components with TypeScriptYou are here](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript)
2.  [React With Redux Toolkit](/blog/post/react-with-redux-toolkit)
3.  [React Context API for State Management](/blog/post/react-context-api-state-management)

### Setup Nextjs Tailwind CSS Styled Components with TypeScript

Contents

[Deploy →](#deploy-rarr)

## [Introduction](#introduction)

In this post, we will set up Nextjs, Tailwind CSS and Styled Components with TypeScript, using the following tools:

-   Nextjs
-   Tailwind CSS
-   Styled Components
-   TypeScript

## [Prerequisites](#prerequisites)

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

-   Node.js
-   Yarn

## [Set up the Nextjs app](#set-up-the-nextjs-app)

### [Step 1: create a Nextjs app](#step-1-create-a-nextjs-app)

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

Terminal window

```
1# Create a Nextjs app2yarn create next-app nextjs-tailwind-styled-components-typescript
```

Then you will be asked whether to use TypeScript and ESLint. Choose the following options:

Terminal window

```
1# Choose a TypeScript2✔ Would you like to use TypeScript with this project? … No / Yes # Choose Yes3
4# Choose a ESLint5✔ Would you like to use ESLint with this project? … No / Yes # Choose Yes
```

### [Step 2: go to the Nextjs app directory](#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:

Terminal window

```
1# Go to the Nextjs app directory2cd nextjs-tailwind-styled-components-typescript
```

### [Step 3: prepare the Nextjs app](#step-3-prepare-the-nextjs-app)

First, we need to install the following dependencies:

Terminal window

```
1# Install the following dependencies2yarn 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:

Terminal window

```
1# Create a .npmrc file2touch .npmrc
```

```
1# Add the following content to the .npmrc file2shamefully-hoist=true3engine-strict=true4save-exact = true5tag-version-prefix=""6strict-peer-dependencies = false7auto-install-peers = true8lockfile = true
```

Next, 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:

Terminal window

```
1# Create a .nvmrc file2touch .nvmrc
```

```
1# Add the following content to the .nvmrc file2lts/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:

Terminal window

```
1# Create a .yarnrc file2touch .yarnrc
```

```
1# Add the following content to the .yarnrc file2--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:

Terminal window

```
1# Create a .prettierrc file2touch .prettierrc
```

```
1# Add the following content to the .prettierrc file2{3  "printWidth": 80,4  "tabWidth": 2,5  "useTabs": false,6  "semi": true,7  "singleQuote": true,8  "quoteProps": "as-needed",9  "jsxSingleQuote": false,10  "trailingComma": "es5",11  "bracketSpacing": true,12  "jsxBracketSameLine": false,13  "arrowParens": "always",14  "requirePragma": false,15  "insertPragma": false,16  "proseWrap": "preserve",17  "htmlWhitespaceSensitivity": "css",18  "endOfLine": "lf"19}
```

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:

Terminal window

```
1# Create a .prettierignore file2touch .prettierignore
```

```
1# Add the following content to the .prettierignore file2.yarn3.vscode4.next5dist6node_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:

Terminal window

```
1# Create a .eslintrc file2touch .eslintrc
```

```
1# Add the following content to the .eslintrc file2{3  "extends": ["next", "next/core-web-vitals", "plugin:prettier/recommended"],4  "rules": {5    "prettier/prettier": ["error", {}, { "usePrettierrc": true }]6  }7}
```

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:

Terminal window

```
1# Create a .eslintignore file2touch .eslintignore
```

```
1# Add the following content to the .eslintignore file2.yarn3.vscode4.next5dist6node_modules
```

Next, add the `engines` field to the `package.json` file:

```
1# Add the following content to the package.json file2{3  "engines": {4    "node": ">=16.0.0",5    "yarn": ">=1.22.0",6    "npm": "please-use-yarn"7  },8}
```

### [Step 4: install Tailwind CSS](#step-4-install-tailwind-css)

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

Terminal window

```
1# Install Tailwind CSS2yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

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

Terminal window

```
1# Create a Tailwind CSS configuration file2npx tailwindcss init -p
```

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

```
1// Add the following content to the tailwind.config.js file2/** @type {import('tailwindcss').Config} */3
4module.exports = {5  content: ['./src/**/*.{js,ts,jsx,tsx}'],6  theme: {7    extend: {},8  },9  plugins: [],10};
```

### [Step 5: install Styled Components](#step-5-install-styled-components)

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

Terminal window

```
1# Install Styled Components2yarn add styled-components3
4# Install Styled Components TypeScript5yarn add -D @types/styled-components6
7# Install Styled Components Babel Plugin8yarn 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:

Terminal window

```
1# Create a .babelrc file2touch .babelrc
```

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

```
1{2  "presets": ["next/babel"],3  "plugins": [4    [5      "styled-components",6      {7        "ssr": true,8        "displayName": true,9        "preprocess": false10      }11    ]12  ]13}
```

### [Step 6: install and set up `twin.macro`](#step-6-install-and-set-up-twinmacro)

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

Terminal window

```
1# Install twin.macro2yarn add twin.macro3
4# Install twin.macro Babel Plugin5yarn add -D babel-plugin-twin
```

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

```
1{2  "presets": ["next/babel"],3  "plugins": [4    [5      "styled-components",6      {7        "ssr": true,8        "displayName": true,9        "preprocess": false10      }11    ],12    [13      "babel-plugin-twin",14      {15        "debug": false,16        "styled": "styled-components"17      }18    ],19    "babel-plugin-macros"20  ]21}
```

Next, add the `babelMacros` field to the `package.json` file:

```
1# Add the following content to the package.json file2{3  "babelMacros": {4    "twin": {5      "styled": {6        "import": "default",7        "from": "styled-components"8      }9    }10  }11}
```

### [Step 7: set up `_document.tsx`](#step-7-set-up-_documenttsx)

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

Terminal window

```
1# Create a pages/_document.tsx file2touch pages/_document.tsx
```

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

```
1import Document, {2  DocumentContext,3  Head,4  Html,5  Main,6  NextScript,7} from 'next/document';8import {ServerStyleSheet} from 'styled-components';9
10export default class _Document extends Document {11  static async getInitialProps(ctx: DocumentContext) {12    const sheet = new ServerStyleSheet();13    const originalRenderPage = ctx.renderPage;14
15    try {16      ctx.renderPage = () =>17        originalRenderPage({18          enhanceApp: (App) => (props) =>19            sheet.collectStyles(<App {...props} />),20        });21
22      const initialProps = await Document.getInitialProps(ctx);23      return {24        ...initialProps,25        styles: (26          <>27            {initialProps.styles}28            {sheet.getStyleElement()}29          </>30        ),31      };32    } finally {33      sheet.seal();34    }35  }36
37  render() {38    return (39      <Html>40        <Head>41          <meta name="theme-color" content="#000000" />42        </Head>43        <body>44          <Main />45          <NextScript />46        </body>47      </Html>48    );49  }50}
```

### [Step 8: set up `_app.tsx`](#step-8-set-up-_apptsx)

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

```
1import type {AppProps} from 'next/app';2import Head from 'next/head';3import 'tailwindcss/tailwind.css';4
5const _App = ({Component, pageProps}: AppProps) => {6  return (7    <>8      <Head>9        <meta name="viewport" content="width=device-width, initial-scale=1" />10        <title>Create Next App</title>11        <meta name="description" content="Generated by create next app" />12        <link rel="icon" href="/favicon.ico" />13      </Head>14      <Component {...pageProps} />;15    </>16  );17};18
19export default _App;
```

### [Step 9: Start styling](#step-9-start-styling)

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

Terminal window

```
1# Create a styles directory2mkdir styles
```

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

Terminal window

```
1# Create a styles/main.ts file2touch styles/main.ts
```

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

```
1import styled from 'styled-components';2import tw from 'twin.macro';3
4export const Container = tw.div`5  flex6  min-h-screen7  flex-col8  items-center9  justify-center10  py-211`;12
13export const Main = tw.main`14  flex15  w-full16  flex-117  flex-col18  items-center19  justify-center20  px-2021  text-center22`;23
24export const Title = tw.h1`25  text-6xl26  font-bold27`;28
29export const TitleLink = tw.a`30  text-blue-60031`;32
33export const Description = tw.p`34  mt-335  text-2xl36`;37
38export const DescriptionCodeHighlight = tw.code`39  rounded-md40  bg-gray-10041  p-342  font-mono43  text-lg44`;45
46export const Cards = tw.div`47  mt-6 flex48  max-w-4xl49  flex-wrap50  items-center51  justify-around52  sm:w-full53`;54
55export const Card = tw.a`56  mt-657  w-9658  rounded-xl59  border60  p-661  text-left62  hover:text-blue-60063  focus:text-blue-60064`;65
66export const CardTitle = tw.h3`67  text-2xl68  font-bold69`;70
71export const CardDescription = tw.p`72  mt-473  text-xl74`;75
76export const Footer = tw.footer`77  flex78  h-2479  w-full80  items-center81  justify-center82  border-t83`;84
85export const FooterCopyRight = tw.a`86  flex87  items-center88  justify-center89  gap-290`;
```

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

```
1import {2  Container,3  Main,4  Title,5  TitleLink,6  Description,7  DescriptionCodeHighlight,8  Cards,9  Card,10  CardTitle,11  Footer,12  FooterCopyRight,13} from '../styles/Home.styles';14import type {NextPage} from 'next';15import Image from 'next/image';16
17const HomePage: NextPage = () => {18  return (19    <Container>20      <Main>21        <Title>22          Welcome to <TitleLink href="https://nextjs.org">Next.js!</TitleLink>23        </Title>24
25        <Description>26          Get started by editing{' '}27          <DescriptionCodeHighlight>pages/index.tsx</DescriptionCodeHighlight>28        </Description>29
30        <Cards>31          <Card href="https://nextjs.org/docs">32            <CardTitle>Documentation &rarr;</CardTitle>33            <p>Find in-depth information about Next.js features and API.</p>34          </Card>35
36          <Card href="https://nextjs.org/learn">37            <CardTitle>Learn &rarr;</CardTitle>38            <p>Learn about Next.js in an interactive course with quizzes!</p>39          </Card>40
41          <Card href="https://github.com/vercel/next.js/tree/canary/examples">42            <CardTitle>Examples &rarr;</CardTitle>43            <p>Discover and deploy boilerplate example Next.js projects.</p>44          </Card>45
46          <Card47            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"48            target="_blank"49            rel="noopener noreferrer"50          >51            <h2>Deploy &rarr;</h2>52            <p>53              Instantly deploy your Next.js site to a public URL with Vercel.54            </p>55          </Card>56        </Cards>57      </Main>58
59      <Footer>60        <FooterCopyRight61          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"62          target="_blank"63          rel="noopener noreferrer"64        >65          Powered by{' '}66          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />67        </FooterCopyRight>68      </Footer>69    </Container>70  );71};72
73export default HomePage;
```