Tutorial NextJS : Cara Install Tailwind CSS di NextJS

	Aldy Tamara Software Engineer
	09 Jun 2020, 2 min read

Assalamualaikum Warahmatullahi Wabarakatuh teman-teman, kali ini kita akan sama-sama belajar tentang css yang sedang naik daun ini dan bagaimana cara install nya di Next JS.

Mungkin sebelum masuk sini kalian wajib baca cara install next jsnya terlebih dahulu disini, kalo sudah silahkan dilanjutkan baca nya!

Pengertian

Tailwind Css adalah sebuah framework css untuk mengimplementasikan design website kalian yang terdiri dari komponen-komponen yang sederhana dan juga dapat dimodifikasi dengan mudah.

Nantinya kalian tidak akan menemukan komponen-komponen seperti button,card yang utuh seperti di bootstrap bisa kalian contohnya di bawah ini:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Cara tersebut memang terlihat lebih panjang tetapi akan lebih mudah dalam pengembangannya seperti jika ingin mengoverride class, karena di tailwind memakai konsep Utility First.

Kalian bisa mengetahui lebih banyak lagi tentang Tailwind CSS di Tailwind CSS ID yang tentunya sudah berbahasa indonesia!

Yang Diperlukan:

Terminal, disini saya menggunakan Git Bash
Text Editor, disini saya menggunakan Visual Studio Code

Tutorial:

Masuk ke folder next js kalian lalu buka terminal kalian lalu ketik:

npm install tailwindcss autoprefixer @fullhuman/postcss-purgecss --save-dev

Penjelasan

npm install : perintah dasar untuk menginstall modul.
tailwindcss : untuk menginstall css ke dalam project.
autoprefixer : akan menambahkan -webkit dll kedalam css kalian, sebagai dukungan kompatibilitas css kalian ke semua browser secara otomatis.
@fullhuman/postcss-purgecss : menghapus semua css yang tidak dipakai! sehingga hasil build kalian semakin kecil!
--save-dev : package/modul yang diinstal bukan diinti melainkan di development depedencies.

Buat sebuah file dengan nama postcss-config.js di root folder serta copy-paste kode berikut:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        // perintah dibawah ini untuk menggunakan postcss-purgecss hanya ketika di environtment production atau dengan kata lain ketika dibuild
        ...(process.env.NODE_ENV === 'production'
            ? {
                '@fullhuman/postcss-purgecss': {
                    content: [
                    // perintah dibawah ini untuk menunjuk folder mana saja yang ingin menggunakan postcss-purge css
                        './components/**/*.js',
                        './pages/**/*.js',
                        './pages/*.js',
                    ],
                    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
                }
            }
            : {})
    }
};

Buat file styles.css difile root kalian, ini tidak wajib di root ya!

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

Kemudian step terakhir kalian buat file pages/ dengan nama _app.js lalu isikan sebagai berikut:

// file _app.js merupakan file wajib yang harus dibuat ketika ingin menginclude css external di nextjs
 
import '../styles.css';
function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
export default App;

coba buka index js di coba copy-paste contoh kode yang menggunakan tailwind css berikut ini ke pages/index.js :

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="bg-gray-800 font-sans leading-normal tracking-normal" style={{ height: `min-height:600px` }}>
        <nav className="bg-gray-800 p-2 mt-0 w-full">
          <div className="container mx-auto flex flex-wrap items-center">
            <div className="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
              <a className="text-white no-underline hover:text-white hover:no-underline" href="#">
                <p className="text-2xl pl-2 text-white">Brand logo</p>
              </a>
            </div>
            <div className="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
              <ul className="list-reset flex justify-between flex-1 md:flex-none items-center">
                <li className="mr-3">
                  <a className="inline-block py-2 px-4 text-white no-underline" href="#">Active</a>
                </li>
                <li className="mr-3">
                  <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                </li>
                <li className="mr-3">
                  <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                </li>
                <li className="mr-3">
                  <a className="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </main>
    </div>
  )
}

Langsung saja kalian buka terminal yang mengarah ke folder kalian dan ketik :

npm run dev

Voila!!! Tailwind CSS sudah bisa digunakan diproject next js kalian! Sekian terimakasih semoga bermanfaat!

Tags: