update Readme.md file

README.md

@@ -1,40 +1,83 @@
 # Free Tailwind CSS UI Components by TailGrids
 
-TailGrids is a library of high-quality Tailwind CSS UI components and blocks, designed specifically for modern websites, landing pages, and web apps. It comes with all the essential UI components and elements you would expect from a top-notch UI library, featuring a consistent design and a copy-paste UI building tool. 
+TailGrids is a library of high-quality Tailwind CSS UI components and blocks, designed specifically for modern websites, landing pages, and web apps. It comes with all the essential UI components and elements you would expect from a top-notch UI library, featuring a consistent design and a copy-paste UI building tool.
 
-The free core version provides numerous UI components along with all core components. It is available for both personal and commercial projects. Please feel free to use it, and don't forget to support and inspire our team by starring this repo. 
+The free core version provides numerous UI components along with all core components. It is available for both personal and commercial projects. Please feel free to use it, and don't forget to support and inspire our team by starring this repo.
 
 ### [🚀 Explore All Components](https://tailgrids.com/components)
 
 ### [🌏 Visit Website](https://tailgrids.com)
 
 ### [📃 Documentation](https://tailgrids.com/docs)
 
-### Installing via NPM - Same for HTML, React, and Vue projects
+## Installation
 
-Ensure you've installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com/docs/plugins) before TailGrids NPM package. Here's a quick guide to get you started with Tailgrids:
+**Step #1**: Install Tailwind and generate the config file.
 
-**1. Install the [TailGrids NPM package](https://www.npmjs.com/package/tailgrids):**
+```shellscript copy
+npm install -D tailwindcss
+npx tailwindcss init
+```
+
+Step #2: Install TailGrids
 
-```bash
+```shellscript copy
 npm i tailgrids
 ```
-**2. Add the TailGrids plugin to your `tailwind.config.js` file:**
 
-```javascript
-module.exports = {
-  // Your existing Tailwind CSS configuration goes here
+Step #3: Update the tailwind.config.js file with the TailGrids plugin.
 
+```js filename="tailwind.config.js" copy showLineNumbers
+module.exports = {
+  content: ["./*.html", "./**/*.{html,js,jsx,ts,tsx,vue}", "./assets/**/*.js"], // your targeted files
+  theme: {},
+  variants: {
+    extend: {},
+  },
   plugins: [require("tailgrids/plugin")],
 };
 ```
-**3. [Browse the components](https://tailgrids.com/components) and simply copy and paste the ones you like into your projects.**
 
-And that's it! You're all set to start using TailGrids in your project. Happy coding!
+**Note:** This is the config file for the HTML project. Go to [Tailwind CSS docs](https://tailwindcss.com/docs/installation/framework-guides) 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.
+
+```css copy
+@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.
+
+```javascript copy
+"scripts": {
+    "build": "npx tailwindcss -i ./input.css -o ./dist/output.css --watch"
+  },
+```
+
+Then, we will have to run the build command:
 
->This TailGrids NPM package enables you to use UI components seamlessly in HTML, React, and Vue projects.
+```shellscript copy
+npm run build
+```
+
+**Step #6**: Include the compiled CSS file in the HTML file. We’ve compiled the file in the **dist** folder.
+
+```html copy
+<link href="/dist/output.css" rel="stylesheet" />
+```
+
+Now, you can copy and paste the components from TailGrids and build websites.
+
+> This TailGrids NPM package enables you to use UI components seamlessly in HTML, React, and Vue projects.
 
 ### Detailed Installation Guides for React and Vue:
+
 - **[Installing on React](https://tailgrids.com/docs/components/react)**
 - **[Installing on Vue](https://tailgrids.com/docs/components/vue)**
 
@@ -48,7 +91,6 @@ And that's it! You're all set to start using TailGrids in your project. Happy co
 
 ### [🖌️ TailGrids Figma](https://tailgrids.com/figma)
 
-
 ## 💙 Support
 
 You can always support this project and inspire us by [Starring🌟 This Repository](https://github.com/TailGrids/tailwind-ui-components)
@@ -57,6 +99,7 @@ and sharing with friends. If you like the the library consider purchasing the [P
 ## Changelog
 
 ### Version 2.2.0
+
 (May, 2024)
 
 - Added over 80 new components.
@@ -66,6 +109,7 @@ and sharing with friends. If you like the the library consider purchasing the [P
 - Updated the Tailwind CSS version along with other dependencies.
 
 ### Version 2.1.0
+
 (October, 2023)
 
 - Introduced dark mode.
@@ -74,6 +118,7 @@ and sharing with friends. If you like the the library consider purchasing the [P
 - Updated dependent packages.
 
 ## Version 2.0.0
+
 (February, 2023)
 
 - This major release doubled our components, introduced dark mode, and expanded our components & example templates.
@@ -87,23 +132,25 @@ and sharing with friends. If you like the the library consider purchasing the [P
 - 100+ eCommerce Components
 
 ## Version 1.1.0
+
 (March, 2022)
 
 We focused on enhancing your design experience with Figma integration and new templates.
 
-- 2 New Templates 
-- Figma Source for UI Components 
-- Responsive Buttons / Viewport 
-- Dedicated Templates Gallery 
+- 2 New Templates
+- Figma Source for UI Components
+- Responsive Buttons / Viewport
+- Dedicated Templates Gallery
+
+## Initial Release
 
-## Initial Release 
 (February, 2022)
 
 The journey began! We launched TailGrids with a strong foundation of components and templates.
 
- - Initial 300+ UI Components 
- - Two Example Templates 
- - NPM Package for Open Source Version
+- Initial 300+ UI Components
+- Two Example Templates
+- NPM Package for Open Source Version
 
 ## 🎁 License