Gatsby Guide

Install and Configure Tailus UI React with Gatsby

1. Create a new Gatsby project

First, create a new Gatsby project by running the following command:

gatsby new my-project
cd my-project

2. Install Tailwind CSS

Next, add Tailwind CSS to your project by running the following command:

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p

3. Add PostCSS Plugin

Next, add Tailwind CSS to your project by running the following command:

// gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}

4. Install Tailus UI Themer

Next, install Tailus UI Themer by running the following command:

npm install @tailus/themer tailwind-merge lucide-react

5. Update your Tailwind CSS configuration

Add the components path to your content array

module.exports = {
    content: [
        "./src/pages/**/*.{js,jsx,ts,tsx}",
        "./src/components/**/*.{js,jsx,ts,tsx}",
        "./node_modules/@tailus/themer/dist/components/**/*.{js,ts}",
    ],
    theme: {
        extend: {},
    }
};

6. Add css directives

Add the following tailwind css directives to your global.css file and import it in your gatsby-browser.js file

// global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
// gatsby-browser.js

import "@styles/global.css";

7. Add cloneElement utility

Create a file called utils.ts in your /src/lib directory and copy-paste the following code

mkdir src/lib && touch src/lib/utils.ts
import { twMerge } from "tailwind-merge";
import React from "react";

/**
 * Clone React element.
 * The function clones React element and adds Tailwind CSS classnames to the cloned element
 * @param element the React element to clone
 * @param classNames Tailwind CSS classnames
 * @returns { React.ReactElement } - Cloned React element
 */
export function cloneElement(element: React.ReactElement, classNames: string) {
    return React.cloneElement(element, {
        className: twMerge(element.props.className, classNames)
    });
}

8. Add paths

Add paths to your tsconfig.json file to make the import of the components easier.

{
    "compilerOptions": {
        /* Paths */
        "baseUrl": "./src",
        "paths": {
            "@tailus-ui/*": ["/components/tailus-ui/*"],
            "@lib/*": ["/lib/*"],
            "@styles/*": ["/styles/*"],
        }
    },
}

What’s next?

Great job! You’ve successfully installed Tailus UI React in your project. Next, let’s learn how to configure your theme.