Cara menginstall project NextJS Typescript dan Tailwindcss

Kali ini saya akan membagikan tutorial cara menginstall project NextJS dengan template Typescript dan tailwindcss dengan mudah.

NextJS adalah salah satu framework untuk ReactJS yang banyak digunakan olah banyaj kalangan dan perusahaan karena kemudahan dan struktur yang mudah untuk dipelajari. untuk menggunakan NextJS pastikan kalian sudah mengetahui dan memahami ReactJS terlebih dahulu karena pada dasarnya NextJS sebagian besar adalah ReactJS.

Untuk menginstall NextJS ada beberapa yang perlu di persiapkan terlebih dahulu

Prerequisite:

• NodeJS
• NPM / Yarn
• ReactJS

Pastikan kalian sudah menginstall NodeJS terlebih dahulu dan NPM atau Yarn.

Untuk menginstall NextJS jalankan perintah

npx create-next-app@latest --ts

Kemudian ikuti dan masukan nama project seuai dengan keinginan kita. misal "LatihanNext"

tunggu sampai proses installasi selesai . untuk menjalankan kita bisa menggunakan perintah

yarn dev

atau

npm run dev

Install TailwindCSS di dalam NextJS

masuk ke dalam project NextJS senelumnya

kemudian masukan perintah

yarn add  tailwindcss postcss autoprefixer -D

atau

npm install -D tailwindcss postcss autoprefixer

kemudian jalankan perintah

npx tailwindcss init -p

edit file "tailwind.config.js" menjadi seperti

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

kemudian edit file "styles/globals.css" dan tambahkan

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Proses instalasi sudah selesai dan kita bisa menggunakan class Tailwindcss di dalam component ReactJS

contoh

<button class="bg-sky-500 text-white px-5 py-2 hover:opacity-75">
  My Button
</button>

Repository:

https://github.com/jejakcoding/example_nextjs_tailwind