{"id":50902383,"url":"https://github.com/arthie/xwind","last_synced_at":"2026-06-16T04:01:07.876Z","repository":{"id":40745355,"uuid":"235995648","full_name":"Arthie/xwind","owner":"Arthie","description":"Tailwind CSS as a templating language in JS and CSS-in-JS","archived":false,"fork":false,"pushed_at":"2023-03-06T17:39:22.000Z","size":58920,"stargazers_count":373,"open_issues_count":11,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T00:40:00.089Z","etag":null,"topics":["babel","babel-macro","babel-macros","babel-plugin","css","css-in-js","emotion","tailwind","tailwind-plugins","tailwind-ui","tailwindcss","typescript-plugin"],"latest_commit_sha":null,"homepage":"","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/Arthie.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}},"created_at":"2020-01-24T12:05:19.000Z","updated_at":"2025-01-29T02:42:35.000Z","dependencies_parsed_at":"2024-01-18T21:40:23.809Z","dependency_job_id":"28cb5477-fd6c-4ea8-a3fc-baf7c61eec7c","html_url":"https://github.com/Arthie/xwind","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Arthie/xwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arthie%2Fxwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arthie%2Fxwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arthie%2Fxwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arthie%2Fxwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arthie","download_url":"https://codeload.github.com/Arthie/xwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arthie%2Fxwind/sbom","scorecard":{"id":16498,"data":{"date":"2025-08-11","repo":{"name":"github.com/Arthie/xwind","commit":"ab7f1dd2675d0f72618b2cadc21376399293a786"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/15 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 16 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"33 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-14T15:54:06.529Z","repository_id":40745355,"created_at":"2025-08-14T15:54:06.529Z","updated_at":"2025-08-14T15:54:06.529Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34390052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-16T02:00:06.860Z","response_time":126,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["babel","babel-macro","babel-macros","babel-plugin","css","css-in-js","emotion","tailwind","tailwind-plugins","tailwind-ui","tailwindcss","typescript-plugin"],"created_at":"2026-06-16T04:01:04.639Z","updated_at":"2026-06-16T04:01:07.863Z","avatar_url":"https://github.com/Arthie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Arthie/xwind/master/resources/header.png\" alt=\"tailwindcssinjs\"\u003e\n\u003c/p\u003e\n\nThis repo contains a collection of packages that makes the integration of Tailwind with CSS-in-JS libraries easier.\n\n## Why does this exist?\n\nYou may have encountered some of these problems when using Tailwind with CSS-in-JS libraries.\n\n- You have to use PurgeCSS to get the minimal CSS file, PurgeCSS relies on string matching\n- No warnings when misspelling, refactoring or using a class that doesn't exist\n- Inline classes can get very long and hard to read\n- You have to specify the variants for utility classes in tailwind.config.js\n\n## Features / Goals\n\n- Solve all of the above problems\n- Automatically compatible with latest Tailwind version **2.X.X**\n- New syntax to apply variants to multiple utility classes `md:hover[text-xs font-normal]`\n- Reacts to changes in made in `tailwind.config.js`\n- Great developer experience with [VS Code extension](https://github.com/Arthie/vscode-xwind) or [typescript-xwind-plugin](https://github.com/Arthie/xwind/tree/master/packages/typescript-plugin)\n- No runtime impact all transformations happen during build time\n- Plugins to support any/your favorite CSS-in-JS syntax\n\n### Support for all Tailwind features:\n\n- All utility and component classes\n- All variant utility classes enabled\n- Full support for custom classes and `tailwind.config.js` customization\n- Supports Tailwind plugins (@tailwindcss/typography, @tailwindcss/forms, ...)\n\n## Packages\n\n### [xwind](https://github.com/Arthie/xwind/tree/master/packages/xwind)\n\nxwind uses a babel plugin that transforms Tailwind classes into CSS object styles or a classes string. The CSS object styles output can be used with your favorite CSS-in-JS library like emotion, styled-components ... The classes string output can be used with the xwind cli to generate a minimal css file of the used Tailwind classes.\n\n### Output mode \"objectstyles\" example\n\n```js\nimport xw from \"xwind\";\n\nconst styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;\n// OR (with custom array syntax)\nconst styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;\n```\n\nTransforms by default into Postcss-js / JSS compatible syntax:\n\n```js\nconst styles = {\n  \"--text-opacity\": \"1\",\n  color: [\"#fde8e8\", \"rgba(253, 232, 232, var(--text-opacity))\"],\n  \"\u0026:hover\": {\n    \"--text-opacity\": \"1\",\n    \"--bg-opacity\": \"1\",\n    color: [\"#def7ec\", \"rgba(222, 247, 236, var(--text-opacity))\"],\n    backgroundColor: [\"#c3ddfd\", \"rgba(195, 221, 253, var(--bg-opacity))\"],\n  },\n};\n```\n\nTransform to CSS string syntax with the css plugin:\n\n```js\nconst styles = `\n  --text-opacity: 1;\n  color: #fde8e8;\n  color: rgba(253, 232, 232, var(--text-opacity));\n  \u0026:hover {\n    --text-opacity: 1;\n    --bg-opacity: 1;\n    color: #def7ec;\n    color: rgba(222, 247, 236, var(--text-opacity));\n    background-color: #c3ddfd;\n    background-color: rgba(195, 221, 253, var(--bg-opacity));\n  }\n`;\n```\n\nobjectstyles plugins make it possible to support any CSS-in-JS library syntax.\n\n### Output mode \"classes\" example\n\n```js\nimport xw from \"xwind\";\n\nconst styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;\n// OR (with custom array syntax)\nconst styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;\n```\n\nTransforms into a classes string:\n\n```js\nconst styles = \"text-red-100 hover:text-green-100 hover:bg-blue-200\";\n```\n\nGenerate the css output with with the xwind cli:\n\n```bash\nnpx run xwind\n```\n\nOutput file \"/src/styles/xwind.css\":\n\n```css\n/*! Generated with xwind | https://github.com/arthie/xwind */\n.hover\\:bg-blue-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));\n}\n.text-red-100 {\n  --tw-text-opacity: 1;\n  color: rgba(254, 226, 226, var(--tw-text-opacity));\n}\n.hover\\:text-green-100:hover {\n  --tw-text-opacity: 1;\n  color: rgba(220, 252, 231, var(--tw-text-opacity));\n}\n```\n\n### [Full xwind package documentation](https://github.com/Arthie/xwind/tree/master/packages/xwind)\n\n---\n\n### [typescript-xwind-plugin](https://github.com/Arthie/xwind/tree/master/packages/typescript-plugin)\n\nThis package is a typescript language service plugin that adds editor support for xwind tagged template syntax: xw\\`...\\` or tw\\`...\\`\n\n![autocomplete](https://github.com/Arthie/vscode-tailwindcssinjs/raw/master/resources/autocomplete.gif)\n\n---\n\n### [xwind VS Code extension](https://github.com/Arthie/vscode-xwind)\n\nThis extension activates typescript-xwind-plugin inside VS Code's Typescript language service.\n\n## Developer packages\n\nWant to create Tailwind tools with javascript?\nHave a look at these packages they make the xwind and typescript-xwind-plugin possible.\n\n### [@xwind/class-utilities](https://github.com/Arthie/xwind/tree/master/packages/class-utilities)\n\nThe class-utilities package contains flexible utilities to compose and parse Tailwind classes.\n\n---\n\n### [@xwind/core](https://github.com/Arthie/xwind/tree/master/packages/core) (WIP)\n\nThe core package uses Tailwind internals to extracts/generate all the data you could want from Tailwind. It provides the data in a structured way with the necessary utilities to create and manipulate this data.\n\n## Non-Affiliation disclaimer\n\nThis project is not affiliated, associated, authorized, endorsed by, or in any way officially connected with Tailwind Labs Inc., or any of its subsidiaries or its affiliates.\nThe name Tailwind as well as related names, marks, emblems and images are registered trademarks of their respective owners.\n\nThe official Tailwind website can be found at https://tailwindcss.com/.\n\nPlease contact the project ower if there are any concerns regarding: [Tailwind CSS brand assets and usage guidelines](https://tailwindcss.com/brand).\n\n## License\n\n[MIT](LICENSE). Copyright (c) 2020 [Arthur Petrie](https://arthurpetrie.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthie%2Fxwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farthie%2Fxwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farthie%2Fxwind/lists"}