{"id":13499953,"url":"https://github.com/windicss/nuxt-windicss","last_synced_at":"2025-05-16T11:04:59.015Z","repository":{"id":37301673,"uuid":"343991410","full_name":"windicss/nuxt-windicss","owner":"windicss","description":"🍃 Windi CSS for Nuxt ⚡","archived":false,"fork":false,"pushed_at":"2024-07-03T03:21:40.000Z","size":7054,"stargazers_count":328,"open_issues_count":28,"forks_count":22,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-07T08:26:40.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/windicss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["harlan-zw"]}},"created_at":"2021-03-03T03:37:24.000Z","updated_at":"2025-03-30T00:47:50.000Z","dependencies_parsed_at":"2024-01-16T10:36:48.226Z","dependency_job_id":"d5b2f942-a209-4520-a996-129785be2c4a","html_url":"https://github.com/windicss/nuxt-windicss","commit_stats":{"total_commits":438,"total_committers":16,"mean_commits":27.375,"dds":0.0730593607305936,"last_synced_commit":"de20d1a4e936940fee22637f674563cad04c8954"},"previous_names":["loonpwn/nuxt-windicss-module"],"tags_count":125,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fnuxt-windicss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fnuxt-windicss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fnuxt-windicss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fnuxt-windicss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/windicss","download_url":"https://codeload.github.com/windicss/nuxt-windicss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253492649,"owners_count":21916968,"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":[],"created_at":"2024-07-31T22:00:48.329Z","updated_at":"2025-05-16T11:04:58.888Z","avatar_url":"https://github.com/windicss.png","language":"Vue","funding_links":["https://github.com/sponsors/harlan-zw"],"categories":["Plugins","Vue"],"sub_categories":["Framework-agnostic Plugins"],"readme":"![nuxt-windicss](https://repository-images.githubusercontent.com/343991410/68f83b80-811f-11eb-9638-51aed75785c4)\n\n\u003cp align='center'\u003e\u003ca href=\"https://windicss.org/\"\u003eWindi CSS\u003c/a\u003e for Nuxt.js! ⚡️\u003cbr\u003e\n\u003csup\u003e\u003cem\u003eNext generation utility-first CSS framework.\u003c/em\u003e\u003c/sup\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003ca href='https://www.npmjs.com/package/nuxt-windicss'\u003e\n\u003cimg src='https://img.shields.io/npm/v/nuxt-windicss?color=0EA5E9\u0026label='\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/nuxt-windicss\" target=\"__blank\"\u003e\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/nuxt-windicss?color=0EA5E9\u0026label=\"\u003e\u003c/a\u003e\n\u003ca href='https://github.com/windicss/nuxt-windicss/actions/workflows/test.yml'\u003e\n\u003cimg src='https://github.com/windicss/nuxt-windicss/actions/workflows/test.yml/badge.svg' \u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href='https://stackblitz.com/edit/nuxt-3-windicss?file=app.vue'\u003e\n\u003cimg src='https://developer.stackblitz.com/img/open_in_stackblitz.svg' height=\"30\" \u003e\n\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ctable\u003e\n\u003ctbody\u003e\n\u003ctd align=\"center\"\u003e\n\u003cimg width=\"2000\" height=\"0\" /\u003e\u003cbr\u003e\n\u003ci\u003eStatus:\u003c/i\u003e \u003cb\u003eStable v2 ✅ , bridge ✅, v3 ✅\u003c/b\u003e\u003cbr\u003e\n\u003csub\u003eMade possible by my \u003ca href=\"https://github.com/sponsors/harlan-zw\"\u003eSponsor Program 💖\u003c/a\u003e\u003cbr\u003e Follow me \u003ca href=\"https://twitter.com/harlan_zw\"\u003e@harlan_zw\u003c/a\u003e 🐦\u003c/sub\u003e\u003cbr\u003e\n\u003cimg width=\"2000\" height=\"0\" /\u003e\n\u003c/td\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c/p\u003e\n\n## Features\n\n- 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting\n- 📄 Use [directives](https://windicss.org/features/directives.html) in any CSS lang `@apply`, `@variants`, `@screen`, `@layer`, `theme()` (Note: Vite / Nuxt v3 has limited support)\n- 🎳 Support Utility Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`\n- 🧑‍🤝‍🧑 Plays nicely with Nuxt v3, Nuxt v2, [@nuxt/vite](https://github.com/nuxt/vite) and [@nuxt/content](https://content.nuxtjs.org/)\n- 🔎 Integrated with [windicss-analysis](https://github.com/windicss/windicss-analysis)\n\n## Getting Started\n\n### Try it Online \n\n- [Nuxt v3 + WindiCSS](https://stackblitz.com/edit/nuxt-3-windicss?file=app.vue)\n- [Nuxt v2 + WindiCSS](https://stackblitz.com/edit/nuxt-v2-windicss?file=components/Tutorial.vue)\n- [Nuxt bridge + WindiCSS](https://stackblitz.com/edit/nuxt-bridge-windicss?file=README.md)\n\n### Install\n\n```bash\nnpx nuxi@latest module add windicss\n```\n\nNote: If you're using Nuxt v2, you should stay on the 2.x tags: `npm install nuxt-windicss@2`.\n\n## Usage\n\nWithin your `nuxt.config.js` add the following.\n\n```js\n// nuxt.config.js\nexport default {\n  buildModules: [\n    'nuxt-windicss',\n  ],\n}\n```\n\n### Nuxt 3\n\n```js\nimport { defineNuxtConfig } from 'nuxt3'\n\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-windicss',\n  ],\n})\n```\n\n### Typescript\n\nFor Nuxt config typescript support, add the module within your `tsconfig.json`.\n\n```json\n\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"nuxt-windicss\"\n    ]\n  }\n}\n```\n\n### Windi Design In DevTools\n\nAdd the import with your existing windi imports and you'll have autocompletion in your Chrome DevTools! See [\"Design in DevTools\"](https://windicss.org/integrations/vite.html#design-in-devtools) for more information.\n\n```ts\nexport default {\n  // ...  \n  css: [\n    'virtual:windi.css',\n    'virtual:windi-devtools',\n  ],\n}\n```\n\n### Windi Analyzer \n\n\u003e An analyser tool for [Windi CSS](https://github.com/windicss/windicss). Browse your utilities usages, have an overview of your design system, identify \"bad practices\", and more!\n\n![](https://user-images.githubusercontent.com/11247099/113150805-0c43f880-9267-11eb-85a6-ec1a2f1eed37.png)\n\nYou can enable Windi Analzyer using the Nuxt config. The analyser is only available in development mode.\n\n```js\nexport default defineNuxtConfig({\n  buildModules: [\n    'nuxt-windicss',\n  ],\n  windicss: {\n    analyze: true\n  }\n})\n```\n\nAlternatively, you can provide an object to control the analysis or the server.\n\n```js\nwindicss: {\n  analyze: {\n    analysis: {\n      interpretUtilities: false,\n    },\n    // see https://github.com/unjs/listhen#options\n    server: {\n      port: 4444,\n      open: true,\n    }\n  }\n}\n```\n\n### Migrating from tailwind\n\nThis module won't work with `@nuxtjs/tailwindcss`, you will need to remove it.\n\n```diff\nbuildModules: [\n-  '@nuxtjs/tailwindcss',\n],\n```\n\nIf you have a `tailwind.config.js`, please rename it to `windi.config.js` or `windi.config.ts`.\n\nFollow the [migration guide](https://windicss.org/guide/migration.html) for other change details.\n\n\n### Ordering (optional)\n\nBy default, this all windi layers will be automatically imported for you.\n\nIf you'd like to change the layout ordering you can include the layers in any order you like. \n\nFor example, if you had a `main.css` which had `h1 { margin-bottom: 30px; }`, you might do something like this:\n\n```js\n// nuxt.config.js\nexport default {\n  // ...\n  css: [\n    // windi preflight\n    'virtual:windi-base.css',\n    // your stylesheets which overrides the preflight\n    '@/css/main.css', \n    // windi extras\n    'virtual:windi-components.css',\n    'virtual:windi-utilities.css',\n  ],\n}\n```\n\n\n## Documentation\n\nRead the [documentation](https://windicss.org/integrations/nuxt.html) for more details.\n\n## Credits\n\n- Windy team\n- [@antfu](https://github.com/antfu) Based on his Rollup / Vite implementation \u0026 his util package\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\nMIT License © 2021 [Harlan Wilton](https://github.com/harlan-zw)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fnuxt-windicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindicss%2Fnuxt-windicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fnuxt-windicss/lists"}