{"library":"stailwc","title":"stailwc","type":"library","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.","language":"javascript","status":"active","last_verified":"Fri May 01","install":{"commands":["npm install stailwc"],"cli":{"name":"stailwc","version":null}},"imports":["const stailwc = require('stailwc/install')","import { TailwindStyle } from 'stailwc'","import { tw } from 'stailwc'"],"auth":{"required":false,"env_vars":[]},"links":{"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},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}