I'm new to Gatsby so this may be silly question but here goes. I'm building a site with some pages created from markdown with createPages API all setup and working as it should but I have a question around styling.

I have few pages in the main navbar and I'd like to style each with a different colour just to differentiate between them. Is there a way to do this? If so how? This is the template I setup to create the pages:

import React from 'react'
import Layout from '../layouts/baselayout'
import { graphql } from 'gatsby'

const pagesTemplate = ({ data }) => {
  const page = data.markdownRemark
  return (
    <Layout>
      <div> <-- add something here to change colour??  -->
        <h2 style={{ textTransform: `uppercase` }}>{page.frontmatter.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: page.html }} />
      </div>
    </Layout>
  )
}

export default pagesTemplate

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

Would I need to create separate layouts? Or could I use some JS to say if page title is home color:red if contact color: blue etc

On a separate note has anyone ever used Tailwind with Gatsby?

Any suggestions would be appreciated.