{"id":13499948,"url":"https://github.com/windicss/vue-windicss-preprocess","last_synced_at":"2025-03-29T05:32:40.581Z","repository":{"id":54388464,"uuid":"326426630","full_name":"windicss/vue-windicss-preprocess","owner":"windicss","description":"A Vue Loader to compile tailwindcss at build time.","archived":true,"fork":false,"pushed_at":"2021-03-18T12:27:26.000Z","size":973,"stargazers_count":45,"open_issues_count":8,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-30T03:25:31.258Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/windicss.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}},"created_at":"2021-01-03T14:31:10.000Z","updated_at":"2024-01-17T13:00:06.000Z","dependencies_parsed_at":"2022-08-13T14:10:41.276Z","dependency_job_id":null,"html_url":"https://github.com/windicss/vue-windicss-preprocess","commit_stats":null,"previous_names":["voorjaar/vue-windicss-preprocess"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fvue-windicss-preprocess","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fvue-windicss-preprocess/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fvue-windicss-preprocess/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fvue-windicss-preprocess/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/windicss","download_url":"https://codeload.github.com/windicss/vue-windicss-preprocess/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222421863,"owners_count":16981940,"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.264Z","updated_at":"2024-10-31T18:31:23.931Z","avatar_url":"https://github.com/windicss.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vue-windicss-preprocess\n\n\u003e A vue loader to compile [tailwindcss](https://github.com/tailwindlabs/tailwindcss) at build time based on [windicss](https://github.com/windicss/windicss) compiler.\n\n```diff\n+ This package will be archived, we will give up support for it, please switch your project to [windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin)\n```\n\n## Installation\n\n```sh\nnpm install vue-windicss-preprocess --save-dev\n```\n\n## Configuration\n\n### Vue\n\nAdd `vue-windicss-preprocess` to your `webpack.config.js` or `vue.config.js`.\n\n```js\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      // ... other rules omitted\n      {\n        test: /\\.vue$/,\n        use: [{\n          loader: 'vue-windicss-preprocess',\n          options: {\n            config: \"tailwind.config.js\",  // tailwind config file path OR config object (optional)\n            compile: false,                // false: interpretation mode; true: compilation mode\n            globalPreflight: true,         // set preflight style is global or scoped\n            globalUtility: true,           // set utility style is global or scoped\n            prefix: 'windi-'               // set compilation mode style prefix\n          }\n        }]\n      }\n    ]\n  },\n  // plugin omitted\n}\n```\n\n```js\n// vue.config.js\nmodule.exports = {\n  configureWebpack: (config) =\u003e {\n    config.module.rules.push({\n      test: /\\.vue$/,\n      use: [{\n        loader: 'vue-windicss-preprocess',\n        options: {\n          config: \"tailwind.config.js\",  // tailwind config file path OR config object (optional)\n          compile: false,                // false: interpretation mode; true: compilation mode\n          globalPreflight: true,         // set preflight style is global or scoped\n          globalUtility: true,           // set utility style is global or scoped\n          prefix: 'windi-'               // set compilation mode style prefix\n        }\n      }]\n    })\n  }\n}\n```\n\n### Nuxt\n\nAdd `vue-windicss-preprocess` to your `nuxt.config.js`\n\n```js\n// nuxt.config.js\nexport default {\n  // ... other configurations omitted\n  // Build Configuration (https://go.nuxtjs.dev/config-build)\n  build: {\n    extend(config) {\n      config.module.rules.push({\n        test: /\\.vue$/,\n        loader: 'vue-windicss-preprocess',\n        options: {\n          config: \"tailwind.config.js\",  // tailwind config file path OR config object (optional)\n          compile: false,                // false: interpretation mode; true: compilation mode\n          globalPreflight: true,         // set preflight style is global or scoped\n          globalUtility: true,           // set utility style is global or scoped\n          prefix: 'windi-'               // set compilation mode style prefix\n        }\n      })\n    }\n  }\n}\n```\n\n## Basic Usage\n\nYou can write any [tailwindcss](https://github.com/tailwindlabs/tailwindcss) classes in your `.vue` files.\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6\"\u003e\n    \u003cimg class=\"block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0\" src=\"/img/erin-lindford.jpg\" alt=\"Woman's Face\"\u003e\n    \u003cdiv class=\"text-center space-y-2 sm:text-left\"\u003e\n      \u003cdiv class=\"space-y-0.5\"\u003e\n        \u003cp class=\"text-lg text-black font-semibold\"\u003e\n          Erin Lindford\n        \u003c/p\u003e\n        \u003cp class=\"text-gray-500 font-medium\"\u003e\n          Product Engineer\n        \u003c/p\u003e\n      \u003c/div\u003e\n      \u003cbutton class=\"px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2\"\u003eMessage\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {}\n\u003c/script\u003e\n```\n\n### Compilation mode\n\nThis is not css-in-js, [windicss](https://github.com/windicss/windicss) only merges and compiles the tailwind classes of each line into a new class. You can try to compile (`npm run build`) and check the generated css file.\n\n```html\n\u003cdiv class=\"windi-15wa4me\"\u003e\n  \u003cimg class=\"windi-1q7lotv\" src=\"/img/erin-lindford.jpg\" alt=\"Woman's Face\"\u003e\n  \u003cdiv class=\"windi-7831z4\"\u003e\n    \u003cdiv class=\"windi-x3f008\"\u003e\n      \u003cp class=\"windi-2lluw6\"\u003e Erin Lindford \u003c/p\u003e\n      \u003cp class=\"windi-1caa1b7\"\u003e Product Engineer \u003c/p\u003e\n    \u003c/div\u003e\n    \u003cbutton class=\"windi-d2pog2\"\u003eMessage\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* ... */\n.windi-1q7lotv {\n  border-radius: 9999px;\n  display: block;\n  height: 6rem;\n  margin-left: auto;\n  margin-right: auto;\n}\n/* ... */\n@media (min-width: 640px) {\n  /* ... */\n  .windi-1q7lotv {\n    flex-shrink: 0;\n    margin-left: 0;\n    margin-right: 0;\n  }\n/* ... */\n```\n\n### Interpretation mode\n\nInterpretation mode will not modify your classes, it will only compile the original tailwind classes just like [tailwindcss](https://github.com/tailwindlabs/tailwindcss), but it is minimized and has native cross-browser support.\n\n```css\n/* ... */\n.py-8 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n/* ... */\n@media (min-width: 640px) {\n  /* ... */\n  .sm\\:items-center {\n    align-items: center;\n  }\n  .sm\\:mx-0 {\n    margin-left: 0;\n    margin-right: 0;\n  }\n  .sm\\:py-4 {\n    padding-top: 1rem;\n    padding-bottom: 1rem;\n  }\n  /* ... */\n}\n```\n\n## Using tailwind directives\n\n```css\n\u003cstyle global\u003e\n  .testApply {\n    @apply pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7;\n  }\n\n  @screen sm {\n    ul {\n      @apply bg-gray-100 p-2 rounded-lg;\n    }\n  }\n\u003c/style\u003e\n```\n\nIf you are using `Vetur` vscode extension, I believe most people are using it. You will need to add `\"vetur.validation.style\": false` to your configuration file.\n\nHit `ctrl-shift-p` or `cmd-shift-p` on mac, type open settings, and select `Preferences: Open Settings (JSON)`. Add `\"vetur.validation.style\": false` to `settings.json` then save it.\n\n## Features\n\n- `tw` is an optional replacement attribute of `class`, The className in `tw` will be merged into the `class` attribute after compilation.\n\n- Group: You can also write groups in all the attributes mentioned above, such as `class=\"font-meidum sm:hover:(font-bold bg-gray-200)\"`. This is a native feature supported by [windicss](https://github.com/windicss/windicss).\n\n- Unrestricted build: such as `bg-hex-1c1c1e p-3.2 p-3rem p-4px w-10/11 bg-$custom-variable ...`\n\n- [Using tailwind directives], such as `@apply`, `@screen`, `@variants`.\n\n- States attribute: such as `sm md lg xl xxl focus hover dark ...` after applid media rules then also will be merged into the `class` attribute. (Attributes like `sm:hover` are not available because they may be rarely used and slow down the parsing speed.)\n\n- [Customize](https://github.com/windicss/svelte-windicss-preprocess/blob/main/docs/using-tailwind-configuration.md): support `tailwind.config.js`.\n\n- For more details, please refer to [windicss](https://github.com/windicss/windicss).\n\n## Resources\n\n- [Roadmap](https://github.com/windicss/windicss/projects/1)\n\n- [Documents](https://windicss.org)\n\n- [Discussions](https://github.com/windicss/windicss/discussions)\n\n- [MIT License](https://github.com/windicss/vue-windicss-preprocess/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fvue-windicss-preprocess","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindicss%2Fvue-windicss-preprocess","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fvue-windicss-preprocess/lists"}