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-tw@latest
# OR
npx create-tw@latest <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
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
