install tailwind css in next js with typescript

In this section we will see how to quick install tailwind css with plugins in nextjs + typescript. For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. create-tw help to create simple ready template for next js with tailwind.


Create Next JS Project

Create next js project with npx:

npx create[email protected]
# OR
npx create[email protected] <project-name> --template <id>

Create next js project with yarn:

yarn create tw
# OR
yearn create tw <project-name> --template <id> 

Select Next js Project

Install tailwind  next js + typescript

Install tailwind next js + typescript

Select typescript.                 

 _ ._ _  _. _|_ _  _|_     
 (_ | (/_ (_| |_ (/_  |_ \/\/  
                  

Welcome to create-tw!
The easiest way to create a Tailwind project

? Project name next-typescript
? App type Next.js (create-next-app)
tid nextjs
? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript

Choose written style.

Welcome to create-tw!
The easiest way to create a Tailwind project

? Project name next-typescript
? App type Next.js (create-next-app)
tid nextjs
? What language will your project be written in? ts
templateIdKey nextjs-ts
? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ prettier
 ◯ clsx

Select tailwind plugin and enter.

? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ @tailwindcss/typography
 ◉ @tailwindcss/forms
❯◉ @tailwindcss/aspect-ratio

Wait and see create-tw install & setup nextjs + typescript + tailwind plugin

Success! Created next-typescript at /Tailwind/next-typescript

✔ Project created using create-next-app
✔ tailwind.config.js created
✔ postcss.config.js created
✔ Added Tailwind directives
✔ Added Tailwind template
✔ Deleted unneeded files
✔ Dependencies installed

Project created in /Tailwind/next-typescript

cd next-typescript
npm run dev

Happy coding!

Move to project

cd next-typescript
npm run dev
tailwind next js with typescript + tailwind plugins

tailwind next js with typescript + tailwind plugins