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.

Step #1: Install Tailwind CSS and generate the config file.

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 -D tailwindcss
npx tailwindcss init

Step #2: Install TailGrids

Next, install TailGrids by running the following command:

npm i tailgrids

Step #3: Update the Configuration

Now, update your tailwind.config.js file to include the TailGrids plugin. Add the following code snippet:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
};

Step #4: 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.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step #5: Start the build process

Finally, start the build process for your React project:

npm run start

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