To connect Next.js with Tailwind and Typescript, you must go through several documentation pages on different websites. This guide saves your time and provides all actions you need to do to get your environment up and running.
Create new Next.js project
# Run: npx create-next-app new-app # or yarn create next-app new-app
After installation is complete, run
cd new-app
to enter the project folder. Reference sourceInstall Tailwind
# Run: npm install tailwindcss@latest postcss@latest autoprefixer@latest # or yarn add tailwindcss@latest postcss@latest autoprefixer@latest
After the installation is complete, we need to generate additional config files:
# Run: npx tailwindcss init -p
To remove unused styles in the production build:
// Replace your tailwind.config.js with: module.exports = { purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
The final step is to import tailwind to CSS:
/* Add this code at the top of ./styles/globals.css */ @tailwind base; @tailwind components; @tailwind utilities;
- Setup Typescript
After installation is complete, run# Run: npm install -D typescript @types/react @types/node # or yarn add --dev typescript @types/react @types/node
touch tsconfig.json
to create a file to store Typescript configuration.
The final step is to start the environment. On the first run, Next.js will populate# Rename: ./pages/_app.js # to ./pages/_app.tsx ./pages/index.js # to ./pages/index.tsx ./pages/api/hello.js # to ./pages/api/hello.ts
tsconfig.json
with a default Typescript configuration, so you don't have to worry about it.
Reference source# Run: npm run dev # or yarn dev
That's it! Now you have a fully functional running environment on http://localhost:3000 for building your amazing project 😊
Â