DEV Community

Cover image for Install Tailwind CSS V3 in GatsbyJS
Abuzer
Abuzer

Posted on • Originally published at larainfo.com

Install Tailwind CSS V3 in GatsbyJS

In this section we will install tailwind css v3 in gatsbyjs. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

Create Gatsby Project
Run below command to create gatsbyjs.

gatsby new tailwind-gatsby
Enter fullscreen mode Exit fullscreen mode

move to project directory.

cd tailwind-gatsby
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS
Install postcss and tailwind css in gatsby.

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Enable the Gatsby PostCSS plugin
In your gatsby-config.js file, enable the gatsby-plugin-postcss.
gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-image`,
    'gatsby-plugin-postcss',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}
Enter fullscreen mode Exit fullscreen mode

Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Create Style Folder and global.css
Create a ./src/styles/global.css file and add the @tailwind directives for each of Tailwind’s layers.
src/styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

gatsby with tailwind css setup

Import the Tailwind CSS path gatsby-browser.js
gatsby-browser.js

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/browser-apis/
 */

// You can delete this file if you're not using it
import './src/styles/global.css'
Enter fullscreen mode Exit fullscreen mode

src/pages/index.js

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <div className="flex items-center justify-center h-screen">
    <h1 className="text-3xl font-bold text-purple-700">
      Install Tailwind CSS in Gatsbyjs
    </h1>
  </div>
)

/**
 * Head export to define metadata for the page
 *
 * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
 */
export const Head = () => <Seo title="Home" />

export default IndexPage
Enter fullscreen mode Exit fullscreen mode

gatsby with tailwind css project

Run gatsby server.

gatsby develop
Enter fullscreen mode Exit fullscreen mode

Top comments (0)