{"id":13480474,"url":"https://github.com/Arthie/xwind","last_synced_at":"2025-03-27T10:32:46.838Z","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":374,"open_issues_count":11,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-23T03:59:56.299Z","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":"2024-09-25T11:44:28.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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245827296,"owners_count":20678956,"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":["babel","babel-macro","babel-macros","babel-plugin","css","css-in-js","emotion","tailwind","tailwind-plugins","tailwind-ui","tailwindcss","typescript-plugin"],"created_at":"2024-07-31T17:00:40.233Z","updated_at":"2025-03-27T10:32:46.400Z","avatar_url":"https://github.com/Arthie.png","language":"TypeScript","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","funding_links":[],"categories":["Tools"],"sub_categories":[],"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"}