{"id":13484992,"url":"https://github.com/windicss/windicss-webpack-plugin","last_synced_at":"2025-07-17T19:33:08.028Z","repository":{"id":41989918,"uuid":"340551308","full_name":"windicss/windicss-webpack-plugin","owner":"windicss","description":"🍃 Windi CSS for webpack ⚡","archived":false,"fork":false,"pushed_at":"2023-09-14T11:44:28.000Z","size":2979,"stargazers_count":79,"open_issues_count":16,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-30T03:25:31.635Z","etag":null,"topics":["webpack","windicss"],"latest_commit_sha":null,"homepage":"https://windicss.org/integrations/webpack.html","language":"TypeScript","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},"funding":{"github":["harlan-zw"]}},"created_at":"2021-02-20T03:24:09.000Z","updated_at":"2023-07-07T12:17:33.000Z","dependencies_parsed_at":"2024-01-13T19:20:15.672Z","dependency_job_id":"94bd1918-b4e8-427a-a625-ccdb4c5a8206","html_url":"https://github.com/windicss/windicss-webpack-plugin","commit_stats":{"total_commits":322,"total_committers":15,"mean_commits":"21.466666666666665","dds":0.05900621118012417,"last_synced_commit":"649914f695ab6d4c91e4b564cc7847073f3f6771"},"previous_names":[],"tags_count":87,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/windicss","download_url":"https://codeload.github.com/windicss/windicss-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245277588,"owners_count":20589172,"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":["webpack","windicss"],"created_at":"2024-07-31T17:01:41.879Z","updated_at":"2025-03-27T16:31:42.187Z","avatar_url":"https://github.com/windicss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/harlan-zw"],"categories":["TypeScript","Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"\u003ch1 align='center'\u003ewindicss-webpack-plugin\u003c/h1\u003e\n\n\u003cp align='center'\u003e:leaves: \u003ca href=\"https://github.com/windicss/windicss\"\u003eWindi CSS\u003c/a\u003e for webpack️\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/windicss-webpack-plugin'\u003e\n\u003cimg src='https://img.shields.io/npm/v/windicss-webpack-plugin?color=0EA5E9\u0026label='\u003e\n\u003c/a\u003e\n\u003ca href='https://github.com/windicss/windicss-webpack-plugin/actions/workflows/test.yml'\u003e\n\u003cimg src='https://github.com/windicss/windicss-webpack-plugin/actions/workflows/test.yml/badge.svg' \u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n⚠️ Consider using [UnoCSS](https://github.com/unocss/unocss) instead, \nit's a rebuild of the WindiCSS core with a lot of improvements and new features. \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 - Maintenance only\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 preflights\n- 🍃 Load configurations from `tailwind.config.js`\n- 🤝 Framework-agnostic: Vue CLI, Nuxt, Next, UmiJS, etc!\n- 📄 Use [directives](https://windicss.org/features/directives.html) in any CSS (SCSS, LESS, etc) `@apply`, `@variants`, `@screen`, `@layer`, `theme()`,\n- 🎳 Support Utility Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`\n\n## Documentation\n\nRead the [documentation](https://windicss.org/integrations/webpack.html) for more details.\n\n## New Webpack Plugin Features\n\n**Design in DevTools mode**\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\nmore information.\n\n```js\nimport 'virtual:windi-devtools'\n```\n\n\u003cimg src=\"https://user-images.githubusercontent.com/41503212/163978055-9be54838-5156-47ca-a2e7-f94480806002.gif\" width=\"300\" /\u003e\n\nThanks [await-ovo](https://github.com/await-ovo)!\n\n## New Windi v3.0 Features\n\n### [Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode)\n\nEnabled it by\n\n```ts\n// windi.config.ts\nexport default {\n  attributify: true\n}\n```\n\nAnd use them as you would like:\n\n```html\n\u003cbutton \n  bg=\"blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600\"\n  text=\"sm white\"\n  font=\"mono light\"\n  p=\"y-2 x-4\"\n  border=\"2 rounded blue-200\"\n\u003e\n  Button\n\u003c/button\u003e\n```\n\n### [Alias Config](https://windicss.org/posts/v30.html#alias-config)\n\n```ts\n// windi.config.ts\nexport default {\n  alias: {\n    'hstack': 'flex items-center',\n    'vstack': 'flex flex-col',\n    'icon': 'w-6 h-6 fill-current',\n    'app': 'text-red',\n    'app-border': 'border-gray-200 dark:border-dark-300',\n  },\n}\n```\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.png\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.png'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\nMIT License © 2022 - Present [Harlan Wilton](https://github.com/harlan-zw)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fwindicss-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindicss%2Fwindicss-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fwindicss-webpack-plugin/lists"}