CodeNewbie Community 🌱

Cover image for Use TailwindCSS with Next.JS & TypeScript
Badr Gorchene
Badr Gorchene

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Image description

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

Image description

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

Image description

  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
Enter fullscreen mode Exit fullscreen mode

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

type [<drive>:][<path>] tsconfig.json
Enter fullscreen mode Exit fullscreen mode

or

echo [content] > [<path>\tsconfig.json]
Enter fullscreen mode Exit fullscreen mode
  • and then execute this command:
npm install --save typescript @types/node @types/react
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

-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: [],
}

Enter fullscreen mode Exit fullscreen mode
  • and also for the file "styles\globals.css" you add on top these three imports:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • 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):

Image description

import '../styles/globals.css'
Enter fullscreen mode Exit fullscreen mode

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

Oldest comments (0)