Start with the HTML installation guide!

HTML Version

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

npm install -D tailwindcss
npx tailwindcss init

Step #2: Install TailGrids

npm i tailgrids

Step #3: Update the tailwind.config.js file with the TailGrids plugin.

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

Note: This is the config file for the HTML project. Go to Tailwind CSS docs (opens in a new tab) and install Tailwind according to your Framework and Languages.

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

Create a CSS file named input.css in the root of your project or the /src directory. Then, include this code at the top of the file.

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

Step #5: Generate the CSS file with the build command.

To do that, we must first add the build script to the package.json file. Make sure you’ve provided the correct path of the input.css file. If it’s in the root, keep the script as it is. If it’s under the /src directory, ****include it before the CSS file.

"scripts": {
    "build": "npx tailwindcss -i ./input.css -o ./dist/output.css --watch"
  },

Then, we will have to run the build command:

npm run build

Step #6: Include the compiled CSS file in the HTML file. We’ve compiled the file in the dist folder.

<link href="/dist/output.css" rel="stylesheet" />

Now, you can copy and paste the components from TailGrids and build websites.