Merge pull request #1 from TailGrids/2.2

2.2

Author: shafiqhammad5

.prettierrc.json

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
-}
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -8,35 +8,73 @@ TailGrids Vue comes with all the necessary integration features for seamless usa
 
 ## Getting Started
 
-To start using TailGrids Vue, follow these steps to properly set it up in your Vue.js project.
+**Step 1:** Install Tailwind CSS and generate the config file.
 
-1. Install Tailgrids by running the following command:
+If you haven't set up Tailwind CSS in your project yet, open your command terminal and execute the following commands:
 
-```sh
-npm install tailgrids
+```shellscript copy
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
 ```
 
-2. Add Tailgrids to your `tailwind.config.js` file:
+**Step #2:** Install TailGrids
 
-```javascript
-module.exports = {
-  content: ["./*.html", "./ecommerce/*.html", "./assets/**/*.js"],
-  theme: {},
-  variants: {
+Next, install TailGrids by running the following command:
+
+```shellscript copy
+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:
+
+```javascript showLineNumbers copy filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
     extend: {},
   },
   plugins: [require("tailgrids/plugin")],
 };
 ```
 
-3. Browse through the available components and choose the desired Vue codebase snippets that you want to use in your projects. Simply copy and paste them!
+**Step #4:** Add Tailwind CSS directives.
+
+Create a CSS file named style.css in the /src directory. Then, include this code at the top of the file.
+
+```css copy
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**Step #5:** Import CSS into main.js
 
-4. To view the changes locally, run the development server with this command:
+Import the `style.css` CSS file inside your ./src/main.js file:
 
-```sh
+```javascript copy
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import "./style.css"; // add this
+
+createApp(App).mount("#app");
+```
+
+```shellscript copy
 npm run dev
 ```
 
+That's it! Browse and start using the [TailGrids Vue component](/components/vue-link) in your Vue project.
+
+If you want to build the project, you can run 
+```shellscript copy
+npm run build
+```
+
+
 ### [🚀 Explore All Components](https://tailgrids.com/components)
 
 ### [🌏 Visit Website](https://tailgrids.com)

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "tailgrids-vue",
   "description": "Tailwind CSS Vue Components based on TailGrids Core, comes with all essential UI components and elements you need to kickstart Tailwind + Vue web projects.",
-  "version": "1.0.0",
+  "version": "2.2.3",
   "private": false,
   "main": "dist/index.js",
   "files": [
@@ -74,7 +74,8 @@
     "npm-run-all2": "^6.1.1",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.5",
+    "tailgrids": "^2.1.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "~5.2.0",
     "vite": "^4.4.11",
     "vue-tsc": "^1.8.19"

package.json

@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import HeroOne from './components/Marketing/Hero/HeroOne.vue'
-import BlogOne from './components/Application/Blogs/BlogOne.vue';
-import TestimonialOne from './components/Marketing/Testimonials/TestimonialOne.vue';
-import FooterOne from './components/Application/Footers/FooterOne.vue';
-import AboutOneVue from './components/Marketing/About/AboutOne.vue';
+import { Footer1 } from './components/Application/Footers'
+import { About1 } from './components/Marketing/About'
+import { Hero1 } from './components/Marketing/Hero'
 </script>
 
 <template>
-  <HeroOne />
-  <BlogOne/>
-  <AboutOneVue/>
-  <TestimonialOne/>
-  <FooterOne/>
+  <Hero1 />
+  <About1 />
+  <Footer1 />
 </template>

src/App.vue

@@ -0,0 +1 @@
+export { default as Blog1 } from './Blog1.vue'

src/components/Application/Blogs/BlogOne.vue renamed to src/components/Application/Blogs/Blog1.vue

@@ -31,30 +31,30 @@ const cardItems = ref([
 
 <template>
   <!-- ====== Cards Section Start -->
-  <section class="bg-gray-2 dark:bg-dark pt-20 pb-10 lg:pt-[120px] lg:pb-20">
+  <section class="bg-gray-2 pb-10 pt-20 lg:pb-20 lg:pt-[120px] dark:bg-dark">
     <div class="container mx-auto">
-      <div class="flex flex-wrap -mx-4">
+      <div class="-mx-4 flex flex-wrap">
         <template v-for="(item, index) in cardItems" :key="index">
           <div class="w-full px-4 md:w-1/2 xl:w-1/3">
             <div
-              class="mb-10 overflow-hidden duration-300 bg-white rounded-lg dark:bg-dark-2 shadow-1 hover:shadow-3 dark:shadow-card dark:hover:shadow-3"
+              class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3"
             >
               <img :src="item.image" alt="image" class="w-full" />
               <div class="p-8 text-center sm:p-9 md:p-7 xl:p-9">
                 <h3>
                   <a
                     :href="item.buttonLink"
-                    class="text-dark dark:text-white hover:text-primary mb-4 block text-xl font-semibold sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px]"
+                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] dark:text-white"
                   >
                     {{ item.title }}
                   </a>
                 </h3>
-                <p class="text-base leading-relaxed text-body-color dark:text-dark-6 mb-7">
+                <p class="mb-7 text-base leading-relaxed text-body-color dark:text-dark-6">
                   {{ item.details }}
                 </p>
                 <a
                   :href="item.buttonLink"
-                  class="inline-block py-2 text-base font-medium transition border rounded-full text-body-color hover:border-primary hover:bg-primary border-gray-3 px-7 hover:text-white dark:border-dark-3 dark:text-dark-6"
+                  class="inline-block rounded-full border border-gray-3 px-7 py-2 text-base font-medium text-body-color transition hover:border-primary hover:bg-primary hover:text-white dark:border-dark-3 dark:text-dark-6"
                 >
                   {{ item.buttonText }}
                 </a>

src/components/Application/Blogs/index.ts

@@ -0,0 +1 @@
+export { default as Card1 } from './Card1.vue'