Documentation
Installation and Usage
React

React Version

This section will guide you through setting up and using TailGrids React with your React projects.

Open your React project and follow these steps to integrate TailGrids components. If you don't have a React project, you can create one (opens in a new tab) using vite, parcel, create-react-app, or your preferred method.

We Will Use Vite for This Guide.

Step 1: Create your project

Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use Create Vite.

npm create vite@latest my-project
cd my-project

Step 2: Install Tailwind CSS

Open the command terminal, then run the code below ( Skip this step if you have already set up Tailwind CSS in your project )

npm install tailwindcss @tailwindcss/vite

Step #2: Install TailGrids

Next, install TailGrids by running the following command:

npm i tailgrids

Step #3: Add Tailwind CSS directives to your CSS.

Create a CSS file named **index.css** in the /src directory. Then, include this code at the top of the file.

@import "tailwindcss";
@plugin "tailgrids/plugin";

Step #4: Configure the vite.config.js file

Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Step #5: Start the build process

Finally, start the build process for your React project:

npm run dev

Step #6: Start using Tailwind CSS and TailGrids

Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/style.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

That's it! Browse and start using the TailGrids React component in your React project.

HTMLVue