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

plaintext
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

plaintext
yarn dev

atau

plaintext
npm run dev

Install TailwindCSS di dalam NextJS

masuk ke dalam project NextJS senelumnya

kemudian masukan perintah

plaintext
yarn add  tailwindcss postcss autoprefixer -D

atau

plaintext
npm install -D tailwindcss postcss autoprefixer

kemudian jalankan perintah

plaintext
npx tailwindcss init -p

edit file "tailwind.config.js" menjadi seperti

javascript
/** @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

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

css
@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

html
<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