Start with the HTML installation guide!

HTML Version

Step #1: Install Tailwind

npm install tailwindcss @tailwindcss/cli -D

Step #2: Install TailGrids

npm i tailgrids -D

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

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

Step #4: Generate the CSS file with the dev command.

To do that, we must first add the dev 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": {
    "dev": "npx tailwindcss -i ./input.css -o ./dist/output.css --watch"
  },

Then, we will have to run the dev command:

npm run dev

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