{"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,"search_vec":"'-100':76 '0.17.0':33 '10':75 'activ':34 'altern':85 'attribut':64 'babel':28,83 'babel-bas':82 'base':84,92 'better':22 'bring':7 'compar':80 'compat':41 'compil':9,79 'compile-tim':8 'compon':51,68 'css':54 'css-in-j':53 'current':29 'develop':35 'differenti':74 'due':86 'emot':47 'engin':57 'experiment':3 'faster':78 'featur':59 'focus':38 'global':71 'implement':93 'instead':26 'javascript':94 'js':56 'jsx':63 'key':73 'like':60 'macro':12 'next':101 'next.js':16,40 'nextj':102 'perform':23 'plugin':97 'rust':91 'rust-bas':90 'similar':17 'stabl':30 'stailwc':1 'style':50,72 'styled-compon':49 'support':45 'swc':4,14,25,88,96,98 'swc-plugin':95 'syntax':69 'tag':67 'tailwind':11,99 'tailwindcss':100 'templat':66 'test':42 'time':10 'transpil':5 'tw':62,65 'twin.macro':19 'typescript':103 'v13.4.3':44 'version':31 'via':24 'x':77","created_at":"2026-05-01T13:49:57.453094+00:00","updated_at":"2026-05-01T13:49:57.453094+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"stailwc","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/stailwc","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}