# Instal Tailwind CSS di Next.js
Sebenarnya ini tidak sulit, karena dokumentasi dari [Next.js](https://nextjs.org/docs/getting-started) dan [Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs) secara detail menjelaskannya. Namun, belakang hal ini menjadi 'rutin' sampai-sampai saya menyimpan hasil akhirnya sebagai templat.
Oke, pertama kita instal Next.js dengan perintah berikut tanpa menggunakan TypeScript, direktori `src/` dan juga `app/`:
```bash
npx create-next-app@latest
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677975905081/57e95e5b-ae91-4692-befb-a534c11e2d6e.png align="center")
Selanjutnya, kita buka Terminal dengan direktori proyek Next.js yang telah dibuat sebagai alamatnya dan instal Tailwind CSS beserta dependensinya:
```bash
npm install -D tailwindcss postcss autoprefixer
```
Lalu, jalankan perintah untuk menciptakan berkas konfigurasi `tailwind.config.js` dan `postcss.config.js` di proyeknya:
```bash
npx tailwindcss init -p
```
Pada `tailwind.config.js` ubah nilai dari *property* `content` dengan alamat untuk semua berkas di folder `pages/` dan `components/`:
```js
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
```
Pada `globals.css` hapus seluruh *style* bawaan dan tulis konfigurasi *style* dari Tailwind CSS:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Pada `_document.js` kita tulis *class-class* dari Tailwind CSS di tag `` sekaligus memastikan konfigurasinya sudah benar:
```html
```
Pada `index.js` biasanya saya ubah jadi seperti berikut:
```javascript
import Head from "next/head";
export default function Home() {
return (
<>
Next.js dengan Tailwind CSS
Here we go!
);
}
```
Sampai sini kita sudah bisa menghapus berkas `Home.module.css` dan tiga berkas `.svg` di folder `public/` karena tidak lagi dibutuhkan.
Terakhir, kita bisa sekalian konfigurasi fon untuk proyeknya. Sesuai [dokumentasi](https://nextjs.org/docs/basic-features/font-optimization), pada `_app.js` kurang lebih kita ubah seperti berikut jika ingin menggunakan fon [Plus Jakarta Sans](https://tokotype.github.io/plusjakarta-sans/):
```javascript
import { Plus_Jakarta_Sans } from "next/font/google";
import "@/styles/globals.css";
const font = Plus_Jakarta_Sans({ subsets: ["latin"] });
export default function App({ Component, pageProps }) {
return (
);
}
```
Kode sumbernya bisa kamu lihat di sini: [https://github.com/bovaldev/nextjs-dengan-tailwindcss](https://github.com/bovaldev/nextjs-dengan-tailwindcss)
Semoga bermanfaat.