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.
- 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.
- 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..
Top comments (2)
Great!
Very good 😉