Kamis, 23 September 2021

    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.

    Daftar Isi

    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

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub