{"id":26433,"library":"stailwc","title":"stailwc","description":"An experimental SWC transpiler that brings compile-time Tailwind macros to SWC and Next.js, similar to twin.macro but with better performance via SWC instead of Babel. Current stable version is 0.17.0, actively developed with a focus on Next.js compatibility (tested with v13.4.3). Supports both emotion and styled-components as CSS-in-JS engines, with features like the tw JSX attribute, tw template tag, component syntax, and global styles. Key differentiator: 10-100x faster compilation compared to Babel-based alternatives due to SWC's Rust-based implementation.","status":"active","version":"0.17.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","swc-plugin","swc","tailwind","tailwindcss","next","nextjs","typescript"],"install":[{"cmd":"npm install stailwc","lang":"bash","label":"npm"},{"cmd":"yarn add stailwc","lang":"bash","label":"yarn"},{"cmd":"pnpm add stailwc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for emotion-based CSS generation","package":"@emotion/serialize","optional":false},{"reason":"peer dependency for Tailwind CSS utility resolution","package":"tailwindcss","optional":false}],"imports":[{"note":"The install module must be required in next.config.js due to SWC plugin API expectations; ESM imports may fail at runtime.","wrong":"import stailwc from 'stailwc/install'","symbol":"stailwc","correct":"const stailwc = require('stailwc/install')"},{"note":"Named export, not default.","wrong":"import TailwindStyle from 'stailwc'","symbol":"TailwindStyle","correct":"import { TailwindStyle } from 'stailwc'"},{"note":"Named export used for template tag and component syntax. Typically used via Babel macro-like transpilation; the import is needed for type checking but may be stripped at build time.","wrong":"import tw from 'stailwc'","symbol":"tw","correct":"import { tw } from 'stailwc'"}],"quickstart":{"code":"// next.config.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, // or styledComponents: true\n  },\n};\n\nmodule.exports = nextConfig;\n\n// _document.tsx\nimport { TailwindStyle } from 'stailwc';\n\nexport default function Document() {\n  return (\n    <div>\n      <TailwindStyle />\n    </div>\n  );\n}\n\n// pages/index.tsx\nimport { tw } from 'stailwc';\nimport { useState } from 'react';\n\nexport default function Home() {\n  const [clicked, setClicked] = useState(0);\n  return (\n    <button\n      tw=\"p-1 m-4 text-green bg-white hover:bg-gray\"\n      css={clicked % 2 === 0 ? tw`border-green` : tw`border-blue`}\n      onClick={() => setClicked(clicked + 1)}\n    >\n      Clicked {clicked} times\n    </button>\n  );\n}","lang":"typescript","description":"Demonstrates Next.js configuration with stailwc SWC plugin, TailwindStyle component for base styles, and tw usage via JSX attribute and template tag."},"warnings":[{"fix":"Upgrade to stailwc 0.17.0 or later and use SWC 1.3.24+","message":"stailwc 0.17.0 requires SWC plugin API v1; older versions incompatible with SWC 1.3.24+","severity":"breaking","affected_versions":"<0.17.0"},{"fix":"Add `import { tw } from 'stailwc'` in any file using the template tag.","message":"The `tw` template tag import may be stripped at build time but still required for TypeScript types; if missing, TypeScript will error on `tw` usage.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Use `const stailwc = require('stailwc/install')` instead of ESM import.","message":"The `install` module must be required with CommonJS `require()` in next.config.js; using `import` will fail.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Set `compiler.emotion: true` for emotion or `compiler.styledComponents: true` for styled-components in next.config.js.","message":"Emotion or styled-components must be enabled in Next.js compiler options alongside the plugin; missing compiler option causes runtime errors.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure `stailwc` is installed (e.g., `npm install -D stailwc`) and use `require('stailwc/install')` in next.config.js.","cause":"Incorrect import path or module not installed.","error":"Error: Cannot find module 'stailwc/install'"},{"fix":"Ensure stailwc/install is only required in next.config.js (Node.js context), not in client-side code.","cause":"Webpack or bundler trying to parse the plugin config file.","error":"Module parse failed: Unexpected token (1:8) for stailwc install file"},{"fix":"Call `stailwc({ engine: 'emotion' })` directly in the swcPlugins array, not as a reference.","cause":"Incorrect usage of the plugin function; maybe double-called or missing options.","error":"TypeError: stailwc is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}