{"id":19747083,"url":"https://github.com/tailgrids/tailgrids-vue","last_synced_at":"2025-04-30T08:32:11.030Z","repository":{"id":212925753,"uuid":"721554538","full_name":"TailGrids/tailgrids-vue","owner":"TailGrids","description":"Vue.js Tailwind CSS UI components and blocks, ideal for creating cutting-edge websites, landing pages, and web applications","archived":false,"fork":false,"pushed_at":"2025-03-05T06:50:55.000Z","size":1262,"stargazers_count":20,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T00:11:16.259Z","etag":null,"topics":["blocks","components","javascript","nuxt","nuxtjs","tailgrids","tailwind","tailwindcss","template","ui","ui-components","vite","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://tailgrids.com/components","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TailGrids.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-21T09:56:54.000Z","updated_at":"2025-03-06T07:07:38.000Z","dependencies_parsed_at":"2023-12-17T11:27:51.527Z","dependency_job_id":"56fe45fd-e112-43b3-ac57-8ee3ac20978a","html_url":"https://github.com/TailGrids/tailgrids-vue","commit_stats":{"total_commits":8,"total_committers":3,"mean_commits":"2.6666666666666665","dds":0.25,"last_synced_commit":"7734127178c0014eeecd662005631551d5d9de62"},"previous_names":["tailgrids/tailgrids-vue"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TailGrids%2Ftailgrids-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TailGrids","download_url":"https://codeload.github.com/TailGrids/tailgrids-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251668782,"owners_count":21624735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blocks","components","javascript","nuxt","nuxtjs","tailgrids","tailwind","tailwindcss","template","ui","ui-components","vite","vue","vuejs"],"created_at":"2024-11-12T02:16:51.275Z","updated_at":"2025-04-30T08:32:11.022Z","avatar_url":"https://github.com/TailGrids.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js UI Components for Tailwind CSS - TailGrids Vue\n\nWelcome to the Vue.js version of TailGrids. TailGrids Vue.js free core version offers a wide range of high-quality Vue.js UI components and blocks, perfect for building modern websites, landing pages, and web apps using the power of Tailwind CSS and Vue.js. With its consistent design and extensive collection of essential UI elements, TailGrids Vue provides everything you need to create stunning user interfaces in your Vue.js projects.\n\n[![sneak-peek](https://github.com/TailGrids/tailgrids-vue/blob/main/tailgrids-vue.png)](https://tailgrids.com/components)\n\nTailGrids Vue comes with all the necessary integration features for seamless usage of these components within your Vue.js application. Whether you're developing single-page applications, progressive web apps, or server-side rendered apps using Vue.js, feel free to use TailGrids Vue for your personal or commercial projects.\n\n## Getting Started\n\n**Step 1:** Install Tailwind CSS and generate the config file.\n\nIf you haven't set up Tailwind CSS in your project yet, open your command terminal and execute the following commands:\n\n```shellscript copy\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n**Step #2:** Install TailGrids\n\nNext, install TailGrids by running the following command:\n\n```shellscript copy\nnpm i tailgrids\n```\n\n**Step #3:** Update the Configuration\n\nNow, update your `tailwind.config.js` file to include the TailGrids plugin. Add the following code snippet:\n\n```javascript showLineNumbers copy filename=\"tailwind.config.js\"\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\"./index.html\", \"./src/**/*.{vue,js,ts,jsx,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [require(\"tailgrids/plugin\")],\n};\n```\n\n**Step #4:** Add Tailwind CSS directives.\n\nCreate a CSS file named style.css in the /src directory. Then, include this code at the top of the file.\n\n```css copy\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n**Step #5:** Import CSS into main.js\n\nImport the `style.css` CSS file inside your ./src/main.js file:\n\n```javascript copy\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\nimport \"./style.css\"; // add this\n\ncreateApp(App).mount(\"#app\");\n```\n\n```shellscript copy\nnpm run dev\n```\n\nThat's it! Browse and start using the [TailGrids Vue component](/components/vue-link) in your Vue project.\n\nIf you want to build the project, you can run \n```shellscript copy\nnpm run build\n```\n\n\n### [🚀 Explore All Components](https://tailgrids.com/components)\n\n### [🌏 Visit Website](https://tailgrids.com)\n\n### [📃 Documentation](https://tailgrids.com/docs)\n\n## 🎁 License\n\nTailGrids Vue Core is 100% Free! and open-source you can use it with your personal or commercial projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailgrids%2Ftailgrids-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailgrids%2Ftailgrids-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailgrids%2Ftailgrids-vue/lists"}