Use TailwindCSS with Next.JS & TypeScript

Next.JS has been one of the most powerful and popular fullStack web frameworks which is based on ReactJS, combined with TailwindCSS and TypeScript it gives us a better and a faster way for building fast and modern web applications, and in this post we will learn how to create your project using these technologies.

1. First way is to install it all when creating project using "npx" :

npx create-next-app -e with-tailwindcss --ts

• you type "y" for yes and it will demand the name of your project like this:

after naming your project and everything is downloaded you're left with a basic Next.JS x TailwindCSS x TypeScript Project.

1. Second case is that you have an existing Next.JS project and you want to add TypeScript and/or TailwindCSS to it:

2.1. For TypeScript you need to create tsconfig.json you can do that by the usual way or by typing this in the command line of your choice in your project directory :

• if you're using git Bash (which i recommend) or linux terminal you can use:

touch tsconfig.json

-if you're using CMD for Windows or Powershell then you can use:

type [<drive>:][<path>] tsconfig.json

or

echo [content] > [<path>\tsconfig.json]

• and then execute this command:

npm install --save typescript @types/node @types/react

2.2. For TailwindCSS you just need to run few commands and modify a couple of files:

• first thing you need to do is to run the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

-then in the tailwind.config.js you copy this lines:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• and also for the file "styles\globals.css" you add on top these three imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

• And the last thing you wanna do is to import golbals.css in your main project folder pages_app.tsx or (app\layout.tsx in Next.JS 13):

import '../styles/globals.css'

And that's it now after migrating you're project from js to ts you're good to go..

Comments

[fcjz]

Great!

[salmaghzel]

Very good 😉