{"id":23765845,"url":"https://github.com/oofdere/crosswind","last_synced_at":"2026-02-18T01:02:27.088Z","repository":{"id":251476449,"uuid":"837010042","full_name":"oofdere/crosswind","owner":"oofdere","description":"tailwind-in-css","archived":false,"fork":false,"pushed_at":"2024-08-11T06:47:50.000Z","size":111,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T12:31:47.044Z","etag":null,"topics":["css","lightningcss","lightningcss-plugin","tailwindcss"],"latest_commit_sha":null,"homepage":"https://crosswind.pages.dev","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/oofdere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-08-02T03:02:02.000Z","updated_at":"2024-08-11T06:47:53.000Z","dependencies_parsed_at":"2024-08-03T10:26:40.528Z","dependency_job_id":null,"html_url":"https://github.com/oofdere/crosswind","commit_stats":null,"previous_names":["oofdere/crosswind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oofdere%2Fcrosswind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oofdere%2Fcrosswind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oofdere%2Fcrosswind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oofdere%2Fcrosswind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oofdere","download_url":"https://codeload.github.com/oofdere/crosswind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054194,"owners_count":21039952,"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":["css","lightningcss","lightningcss-plugin","tailwindcss"],"created_at":"2024-12-31T23:20:33.102Z","updated_at":"2025-10-09T04:46:36.065Z","avatar_url":"https://github.com/oofdere.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# crosswind\n\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/oofdere/crosswind/main.yml)\n![NPM Version](https://img.shields.io/npm/v/lightningcss-plugin-crosswind)\n![NPM License](https://img.shields.io/npm/l/lightningcss-plugin-crosswind)\n[![Formatted with Biome](https://img.shields.io/badge/Formatted_with-Biome-60a5fa?style=flat\u0026logo=biome)](https://biomejs.dev/)\n\na.k.a. tailwind-in-css.\n\n## features\n\n### `tw` units\n\ntailwind sizing units\n\n```css\n.foo {\n    width: 12tw;\n    height: calc(12tw / 2);\n}\n```\n\n### `@screen` queries\n\nquery for tailwind breakpoints\n\n```css\n.foo {\n    color: red;\n\n    @screen md {\n        color: blue;\n    }\n}\n```\n\n### `@light` and `@dark` queries\n\nshorthand for light and dark queries\n\n```css\n.foo {\n    @light {\n        color: black;\n    }\n\n    @dark {\n        color: white;\n    }\n}\n```\n\n### `size` property\n\nset width and height at once\n\n```css\n.foo {\n    size: 12tw;\n}\n```\n\n## how?\nFirst, set up LightningCSS, then:\n\n```bash\nbun add lightningcss-plugin-crosswind\n```\n\nand then just update your LightningCSS config. For instance, with Vite:\n\n```ts\nimport { defineConfig } from 'vite';\nimport { crosswind } from 'lightningcss-plugin-crosswind';\n\nexport default defineConfig({\n\tplugins: [],\n\tcss: {\n\t\ttransformer: 'lightningcss',\n\t\tlightningcss: {\n\t\t\t...crosswind\n\t\t}\n\t},\n\tbuild: {\n\t\tcssMinify: 'lightningcss'\n\t}\n});\n```\n\n## why?\n\nMy main motivation is to easily access the TailwindCSS design system in CSS, which has saved me from many, many hours of decision paralysis by providing sensible defaults. I don't hate utility classes but I do enjoy writing actual CSS as well, especially when I'm doing dynamic styling, or writing a library that might end up being used without Tailwind installed.\n\nThis has been possible with `@apply` in the past, but that always felt like a very messy solution to me since you avoid standard CSS syntax, as the Tailwind team has also pointed out. Tailwind v4 makes this easier, by providing a set of standard variables that define the theme, however this just means more things to memorize, larger CSS files, and since these variables are not dynamic, you also sometimes have to do very ugly things like `calc(var(--spacing-0_5) / 2)` or `calc(var(--spacing-32) + var(--spacing-2))` to get the values you need.\n\nI also really like semantic values, and Tailwind gives you sensible semantic values (sm, md, lg, xl, screen, etc.) which really helps me avoid decision paralysis.\n\n---\n\nThis project was created using `bun init` in bun v1.1.21. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foofdere%2Fcrosswind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foofdere%2Fcrosswind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foofdere%2Fcrosswind/lists"}