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: