Instalasi Tailwind CSS di Next.js: Panduan Langkah Demi Langkah

Baik, kali ini kita akan belajar bagaimana cara menggunakan Tailwind CSS dialam framework Next.js. Langsung aja, buka terminal Anda dan install next.js nya.

yarn create next-app nextail

Kemudian setelah itu, lakukan instalasi tailwindcss dan kawan-kawannya.

yarn add tailwindcss@latest postcss@latest autoprefixer@latest -D

Kemudian buat postcss.config.js dan tailwind.config.js dengan menjalankan perintah berikut diterminal Anda.

npx tailwindcss init -p

Setelah itu, buka file _app.js di /pages/_app.js, dan jika Anda lihat dia akan import globals.css by default, mari kita ganti dengan tailwindcss.

// import '../styles/globals.css'
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Jika sudah, silahkan buka file index.js di /pages/index.js dan test apakah tailwind sudah bisa dipakai atau belum.

import React from 'react'

export default function index() {
    return (
        <div className="bg-red-500 min-h-screen flex items-center justify-center text-white antialiased">
            You have Tailwind CSS v2.2
        </div>
    )
}

Setelah itu, maka buka kembali terminal Anda, dan lakukan perintah berikut untuk memulai next.js nya.

yarn dev

Jika sudah, maka harusnya Anda sudah bisa melihatnya di url: http://localhost:3000. Nah setelah itu, jika Anda ingin, Anda bisa include tailwind nya secara eksplisit di globals.css tadi seperti ini. Buka filenya di /pages/styles/globals.css, hapus semua cssnya ganti dengan ini.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Dan kemudian, buka kembali _app.js tadi, dan ganti dengan ini.

import '../styles/globals.css'
// import 'tailwindcss/tailwind.css'

Jika sudah, maka harusnya kita sudah bisa menggunakan tailwindcss di dalam nextjs.

¶Related Articles

• Setup Tailwind CSS v3 On Remix
• Membuat Accordion Dengan Pure Tailwind CSS