Install Tailwind CSS V3 in GatsbyJS
Tags: tailwindcss, gatsby, webdev, react
Published: 2022-09-07 07:27:35

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.
```sh
gatsby new tailwind-gatsby
```
move to project directory.
```sh
cd tailwind-gatsby
```

**Install Tailwind CSS**
Install postcss and tailwind css in gatsby.
```sh
npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
```

**Enable the Gatsby PostCSS plugin**
In your gatsby-config.js file, enable the gatsby-plugin-postcss.
_gatsby-config.js_
```react
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.
      },
    },
  ],
}
```

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

_tailwind.config.js_
```react
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
**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_
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
![gatsby with tailwind css setup](https://demo.larainfo.com/screenshot/react/tailwind-css-with-gatsbyjs-setup.png)


Import the Tailwind CSS path gatsby-browser.js
_gatsby-browser.js_
```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'
```
_src/pages/index.js_
```react
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
```
![gatsby with tailwind css project](https://demo.larainfo.com/screenshot/react/tailwind-css-with-gatsbyjs-index.png)

Run gatsby server.
```sh
gatsby develop
```