Step by Step Develop Gatsby+TailwindCSS+WordPress

Berikut adalah langkah-langkah melakukan instal, konfigurasi dan develop gatsbyjs, tailwindcss dan wordpress.

• Clone gatsby-starter-default dengan perintah:

$  gatsby new gatsby-starter-default

• Masuk ke folder gatsby-starter-default

$ cd gatsby-starter-default

• Develop gatsby-starter-default dengan printah:

$ gatsby develop

• Buka browser ketikkan http://localhost:8000 pada url, jika muncul tampila “welcome to gatsby” gatsby-starter-default berhasil dijalankan.
• Install tailwindcss pada folder proyek anda dengan printah:

$ npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss

$ npx tailwindcss init -p

maka akan terbentuk file 2 file yakni postcss.config.js dan tailwind.conf.js

• Aktifkan gatsby postcss plugin dengan menambakan baris berikut:

‘gatsby-plugin-postcss’,

kedalam file gatsby-config.js

• Tambahkan baris berikut:

“./src/pages/**/*.{js,jsx,ts,tsx}”,

“./src/components/**/*.{js,jsx,ts,tsx}”,

kedalam file tailwind.config.js

• Buat file global.css di folder src/styles

$ mkdir -p src/styles

$ touch global.css

• Isi file berikut ke dalam file global.css

$ cd src/styles

$ vim global.css

@tailwind base;

@tailwind components;

@tailwind utilities;

1. Buat file gatsby-browser.js pada folder proyek anda

$ vim gatsby-browser.js

isikan file berikut:

import ‘./src/styles/global.css’

1. Jalankan gatsby dengan printah berikut:

$ gatsby develop

Akses dari browser dengan mengettikan perintah di url http://localhost:8000 tidak terjadi error dan tampilan web tidak beraturan seperti default, selamat tailwindcss dan gatsby sudah berhasil.

Styling Gatsby JS dengan TailwindCSS

1. Edit file header.js seperti berikut:

import * as React from “react”

import { Link } from “gatsby”

import gatsbyLogo from “../images/gatsby-icon.png” // Import gambar logo Gatsby

const Header = ({ siteTitle }) => (

<header className=”flex items-center justify-between mx-auto max-w-screen-lg px-4 py-4″>

                                         <Link

                                                            to=”/”

className=”text-lg font-semibold text-gray-800 hover:text-blue-500 focus:text-blue-500 focus:outline-none”

                                        >

                                        {siteTitle}

                                         </Link>

                    {/* Menggunakan gambar logo resmi dari Gatsby */}

                    <img

                    alt=”Gatsby logo”

                    width={30}

                    style={{ margin: 0 }}

                    src={gatsbyLogo} // Menggunakan variabel yang berisi path gambar logo Gatsby

                    />               

  </header>

)

export default Header

• Edit file layout.js seperti berikut:

import * as React from “react”

import { useStaticQuery, graphql } from “gatsby”

import Header from “./header”

const Layout = ({ children }) => {

                    const data = useStaticQuery(graphql`

                    query SiteTitleQuery {

                                        site {

                                        siteMetadata {

                                        title

                                        }

                            }

                    }

  `)

  return (

    <>

      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />

      <div className=”mx-auto max-w-screen-lg px-4″>

        <main>{children}</main>

        <footer className=”mt-5 text-sm”>

          © {new Date().getFullYear()} &middot; Built with

          {` `}

          <a href=”https://www.gatsbyjs.com” className=”text-blue-500 hover:text-blue-700″>Gatsby</a>

        </footer>

      </div>

    </>

  )

}

export default Layout

• Edit file index.js seperti berikut:

]

const moreLinks = [

  { text: “Join us on Discord”, url: “https://gatsby.dev/discord” },

  {

    text: “Documentation”,

    url: “https://gatsbyjs.com/docs/”,

  },

  {

    text: “Starters”,

    url: “https://gatsbyjs.com/starters/”,

  },

  {

    text: “Showcase”,

    url: “https://gatsbyjs.com/showcase/”,

  },

  {

    text: “Contributing”,

    url: “https://www.gatsbyjs.com/contributing/”,

  },

  { text: “Issues”, url: “https://github.com/gatsbyjs/gatsby/issues” },

]

const utmParameters = `?utm_source=starter&utm_medium=start-page&utm_campaign=default-starter`

const IndexPage = () => (

  <Layout>

    <Seo title=”Home” />

    <div className=”text-center”>

      <StaticImage

        src=”../images/example.png”

        loading=”eager”

        width={64}

        quality={95}

        formats={[“auto”, “webp”, “avif”]}

        alt=””

        style={{ marginBottom: `var(–space-3)` }}

      />

      <h1>

        Welcome to <b>Gatsby!</b>

      </h1>

      <p className=”mt-4 mb-8″>

        <b>Example pages:</b>{” “}

        {samplePageLinks.map((link, i) => (

          <React.Fragment key={link.url}>

            <Link to={link.url}>{link.text}</Link>

            {i !== samplePageLinks.length – 1 && <> · </>}

          </React.Fragment>

        ))}

        <br />

        Edit <code className=”text-gray-700″>src/pages/index.js</code> to update this page.

      </p>

    </div>

    <ul className=”list-none”>

      {links.map(link => (

        <li key={link.url} className=”mb-8″>

          <a

            className=”text-blue-500 hover:underline”

            href={`${link.url}${utmParameters}`}

          >

            {link.text} ↗

          </a>

          <p className=”mt-2 text-sm”>{link.description}</p>

        </li>

      ))}

    </ul>

    <div className=”mt-8″>

      {moreLinks.map((link, i) => (

        <React.Fragment key={link.url}>

          <a className=”text-blue-500 hover:underline” href={`${link.url}${utmParameters}`}>

            {link.text}

          </a>

          {i !== moreLinks.length – 1 && <> · </>}

        </React.Fragment>

      ))}

    </div>

  </Layout>

)

export default IndexPage