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.