{"id":13822293,"url":"https://github.com/arlyon/stailwc","last_synced_at":"2025-04-04T11:12:36.728Z","repository":{"id":56820090,"uuid":"526028294","full_name":"arlyon/stailwc","owner":"arlyon","description":"Tailwind in SWC, Nextjs, and Vite, fast 🚀","archived":false,"fork":false,"pushed_at":"2024-02-15T13:15:59.000Z","size":1336,"stargazers_count":233,"open_issues_count":13,"forks_count":3,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T10:06:43.969Z","etag":null,"topics":["next","nextjs","swc","swc-plugin","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/stailwc","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arlyon.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":"contributing.md","funding":null,"license":"LICENSE-APACHE","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":"2022-08-18T02:38:11.000Z","updated_at":"2025-03-26T15:42:04.000Z","dependencies_parsed_at":"2024-08-04T08:08:15.925Z","dependency_job_id":"5a5baf33-e7df-42c7-8a96-47459bdca837","html_url":"https://github.com/arlyon/stailwc","commit_stats":{"total_commits":343,"total_committers":4,"mean_commits":85.75,"dds":"0.055393586005830886","last_synced_commit":"8704bed94f6fc14b06302bb8d15f25e7964844d0"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arlyon%2Fstailwc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arlyon%2Fstailwc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arlyon%2Fstailwc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arlyon%2Fstailwc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arlyon","download_url":"https://codeload.github.com/arlyon/stailwc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"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":["next","nextjs","swc","swc-plugin","tailwind","tailwindcss"],"created_at":"2024-08-04T08:01:52.924Z","updated_at":"2025-04-04T11:12:36.710Z","avatar_url":"https://github.com/arlyon.png","language":"Rust","funding_links":[],"categories":["Rust"],"sub_categories":[],"readme":"# stailwc (speedy tailwind compiler)\n\nThis is an experimental SWC transpiler to bring compile time\ntailwind macros to SWC (and nextjs) a-la twin macro. The goal\nis to give the same great compile-time ergonomics and flexibility\nwhile performing considerably better than babel-based alternatives.\nSupports both `emotion` and `styled-components` for CSS-in-JS, and\nmany build systems such as SWC, nextjs, Vite, etc.\n\n## Compatibility Chart\n\nWe are currently testing against the following versions. Other versions outside these may still work, however.\n\n| stailwc | NextJS | Emotion | Styled Components | swc    | Vite  |\n| ------- | ------ | ------- | ----------------- | ------ | ----- |\n| latest  | 13.4.3 | 11.10.5 | 5.3.6             | 1.3.24 | 4.1.0 |\n\n## Feature Chart\n\n| Feature                         | Emotion | Styled Components |\n| ------------------------------- | ------- | ----------------- |\n| `tw` jsx attribute              | ✅      | ✅                |\n| `tw` template tag               | ✅      | ✅                |\n| `tw` component syntax           | ✅      | ✅                |\n| `tw` component extension syntax | ✅      | ✅                |\n| Global styles                   | ✅      | ✅                |\n| Plugin parameter suggestions    | ✅      | ✅                |\n\n## Getting started\n\n```bash\n\u003e npm add -D stailwc\n\u003e yarn add -D stailwc\n\u003e pnpm add -D stailwc\n```\n\nTo get started with NextJS, place the following in your next.config.js.\nFor other framworks / tools, please see the examples.\n\n`next.config.js`\n\n```js\nconst stailwc = require(\"stailwc/install\");\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  experimental: {\n    swcPlugins: [\n      stailwc({\n        engine: \"emotion\", // or \"styled-components\"\n      }),\n    ],\n  },\n  compiler: {\n    emotion: true,\n    // or\n    styledComponents: true,\n  },\n};\n\nmodule.exports = nextConfig;\n```\n\nOptionally, you can also include the tailwind normalizer + forms\nplugin by including the `\u003cTailwindStyle /\u003e` component. Please see\nthe relevant examples.\n\n`_document.tsx`\n\n```tsx\nimport { TailwindStyle } from \"stailwc\";\n\nexport default function App({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cTailwindStyle /\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Types\n\nThere is one step you need to take to get types working. You need to add `stailwc.d.ts` to the root of your source\nfolder.\n\n## Usage\n\n### The `tw` tag\n\nYou can interact with stailwc in two ways. The first is through\nthe `tw` JSW attribute, and the second is via the `tw` template\ntag.\n\n```tsx\nimport { useState } from \"react\";\n\nexport const ColorButton = () =\u003e {\n  const [clicked, setClicked] = useState(0);\n  return (\n    \u003cbutton\n      tw=\"p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3\"\n      css={clicked % 2 == 0 ? tw`border-green` : tw`border-blue`}\n      onClick={() =\u003e setClicked(clicked + 1)}\n    \u003e\n      Clicked {clicked} times\n    \u003c/button\u003e\n  );\n};\n```\n\n### Component syntax\n\nYou can also create styled components using the `tw` template tag.\nThis will automatically create the correct syntax for both `emotion`\nand `styled-components`.\n\n```tsx\nexport const StyledButton = tw.button`p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3`;\nexport const ShadowButton = tw(StyledButton)`shadow-lg`;\n```\n\n## Examples\n\nThere are examples available for both `emotion` and `styled-components`.\nYou can run them by cloning the repo and running `yarn` followed by\n`yarn dev` in the example directory. You will need to `stailwc` first.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farlyon%2Fstailwc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farlyon%2Fstailwc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farlyon%2Fstailwc/lists"}