Documentation

This documentation is intended to give you instructions on how to use the templates and components you’ve downloaded from TailGrids.

If you have any questions that are beyond the scope of this documentation, feel free to reach out to us on Discord or open a support ticket. We will get back to you ASAP.

Quickstart

Here’s how you can add TailGrids to your existing Tailwind CSS project:

1. Install TailGrids NPM package:

npm i tailgrids

2. Add TailGrids plugin to your tailwind.config.js file.

module.exports = { 
  content: ["./*.html", "./ecommerce/*.html", "./assets/**/*.js"],
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [require("tailgrids/plugin")],
  
};

Note: Your tailwind.config.js file might look a bit different than the above one. Checkout the TailwindCSS docs to see how you can install for your corrensponding project.

3. Browse Components and copy-paste snippets you like - on your projects and keep using!

Check out styling guide →

React - Quickstart

Here’s how you can add TailGrids React to your existing React and Tailwind CSS project:

1. Install TailGrids NPM package for getting our theme:

npm i tailgrids

2. Add TailGrids plugin to your tailwind.config.js file.

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

3. Browse and Use Components and copy-paste snippets you like - on your projects and keep using!

or

4. Use tailgrids-react in your project. First install it using this command:

npm install tailgrids-react

import AttentionAlert1  from "tailgrids-react";

Stuck with anything? Feel free to open a support ticket, we will get back to you ASAP