stailwc

library0.17.0jsnpmunverified

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.

web-framework

npm install stailwc

package ↗

INSTALL

IMPORT

SIG · STAILWC

stailwc

web-frameworkjavascriptv0.17.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

stailwc

✓ const stailwc = require('stailwc/install')

✗ import stailwc from 'stailwc/install'

The install module must be required in next.config.js due to SWC plugin API expectations; ESM imports may fail at runtime.

TailwindStyle

✓ import { TailwindStyle } from 'stailwc'

✗ import TailwindStyle from 'stailwc'

Named export, not default.

✓ import { tw } from 'stailwc'

✗ import tw from 'stailwc'

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.

Demonstrates Next.js configuration with stailwc SWC plugin, TailwindStyle component for base styles, and tw usage via JSX attribute and template tag.

// next.config.js const stailwc = require('stailwc/install'); /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, experimental: { swcPlugins: [ stailwc({ engine: 'emotion', // or 'styled-components' }), ], }, compiler: { emotion: true, // or styledComponents: true }, }; module.exports = nextConfig; // _document.tsx import { TailwindStyle } from 'stailwc'; export default function Document() { return ( <div> <TailwindStyle /> </div> ); } // pages/index.tsx import { tw } from 'stailwc'; import { useState } from 'react'; export default function Home() { const [clicked, setClicked] = useState(0); return ( <button tw="p-1 m-4 text-green bg-white hover:bg-gray" css={clicked % 2 === 0 ? tw`border-green` : tw`border-blue`} onClick={() => setClicked(clicked + 1)} > Clicked {clicked} times </button> ); }

stailwc --version

Debug

Known issues

breakingstailwc 0.17.0 requires SWC plugin API v1; older versions incompatible with SWC 1.3.24+

fix

Upgrade to stailwc 0.17.0 or later and use SWC 1.3.24+

affects: <0.17.0

deprecatedThe `tw` template tag import may be stripped at build time but still required for TypeScript types; if missing, TypeScript will error on `tw` usage.

fix

Add `import { tw } from 'stailwc'` in any file using the template tag.

affects: >=0.1.0

gotchaThe `install` module must be required with CommonJS `require()` in next.config.js; using `import` will fail.

fix

Use `const stailwc = require('stailwc/install')` instead of ESM import.

affects: >=0.1.0

gotchaEmotion or styled-components must be enabled in Next.js compiler options alongside the plugin; missing compiler option causes runtime errors.

fix

Set `compiler.emotion: true` for emotion or `compiler.styledComponents: true` for styled-components in next.config.js.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'stailwc/install'

Incorrect import path or module not installed.

fix

Ensure `stailwc` is installed (e.g., `npm install -D stailwc`) and use `require('stailwc/install')` in next.config.js.

Module parse failed: Unexpected token (1:8) for stailwc install file

Webpack or bundler trying to parse the plugin config file.

fix

Ensure stailwc/install is only required in next.config.js (Node.js context), not in client-side code.

TypeError: stailwc is not a function

Incorrect usage of the plugin function; maybe double-called or missing options.

fix

Call `stailwc({ engine: 'emotion' })` directly in the swcPlugins array, not as a reference.

Upgrade

Version history

0.17.0latest on npm

Audit

Dependencies

@emotion/serializerequiredpeer dependency for emotion-based CSS generation

tailwindcssrequiredpeer dependency for Tailwind CSS utility resolution

Agent activity

5 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/stailwc ↗