DEV Community

Waldo
Waldo

Posted on

Next.js + TypeScript + Tailwind CSS project setup

1. Set up the Next.js project
First, create-next-app use the command to create a codebase from the Next.js template.

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
Enter fullscreen mode Exit fullscreen mode

When the command is completed, the code of Next.js is generated, so move the directory and check the operation.

cd nextjs-ts-tailwind-example
npm run dev
Enter fullscreen mode Exit fullscreen mode

2. Set up typescript
create config files for typescript

touch tsconfig.json next-env.d.ts
Enter fullscreen mode Exit fullscreen mode

Install the packages needed to run TypeScript.

npm install --save-dev typescript @types/react @types/node
Enter fullscreen mode Exit fullscreen mode

add to the Typescript config file

//tsconfig.json 
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
Enter fullscreen mode Exit fullscreen mode

add to the next-env.d.ts config file

/// <reference types="next" />
/// <reference types="next/types/global" />
Enter fullscreen mode Exit fullscreen mode

Next, rewrite various js files to ts files by referring to the following repository.

mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts
Enter fullscreen mode Exit fullscreen mode

After rewriting, check the operation.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Check the operation with a browser and it is OK if it works without error.

3. Set up Tailwind css

npm install tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

generate a Tailwind CSS configuration file.

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Then, tailwind.config.js the postcss.config.js two files will be generated.

//tailwind.config.js
module.exports = {
  purge: [], //remove this line 
  purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode 
//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

Rewrite to read the CSS generated by Tailwind CSS styles/global.css.

//styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Now you can use Tailwind CSS!

Top comments (1)

Collapse
 
olivertembo profile image
olivertembo •

Your example gir repo no longer exists!

Read next

shreyash333 profile image

Azure DevOps Services and Exploring Alternatives

Shreyash Singh -

ali_tariq_90f2c6a125b095c profile image

From Monolithic to Microservices: A Comprehensive Guide

Ali Tariq -

codewithcaen profile image

Simple YAML Linter/Validator Workflow for GitHub Actions

CodeWithCaen -

gowtham758550 profile image

Twilio Challenge: LOL Loops: Your Developer Rant Responder

Gowtham -