Mari Kita Install Tailwind CSS Di Dalam Next.js

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.

1yarn create next-app nextail
2
bashCopy

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

1yarn add [email protected] [email protected] [email protected] -D
2
bashCopy

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

1npx tailwindcss init -p
2
bashCopy

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.

1// import '../styles/globals.css'
2import 'tailwindcss/tailwind.css'
3
4function MyApp({ Component, pageProps }) {
5  return <Component {...pageProps} />
6}
7
8export default MyApp
9
jsxCopy

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

1import React from 'react'
2
3export default function index() {
4    return (
5        <div className="bg-red-500 min-h-screen flex items-center justify-center text-white antialiased">
6            You have Tailwind CSS v2.2
7        </div>
8    )
9}
10
jsxCopy

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

1yarn dev
2
bashCopy

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.

1/* globals.css */
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
cssCopy

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

1import '../styles/globals.css'
2// import 'tailwindcss/tailwind.css'
3
jsxCopy

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