#swc #nextjs #tailwind #swc-plugin #tailwindcss #next #utils #tailwind-css

nightly stailwc

An experimental transpiler to bring tailwind macros to SWC rocket

18 releases (breaking)

0.17.0 Jun 9, 2023
0.15.0 Feb 20, 2023
0.12.0 Dec 27, 2022
0.9.0 Nov 5, 2022

#2 in #nextjs

49 downloads per month


65K SLoC

stailwc (speedy tailwind compiler)

This is an experimental SWC transpiler to bring compile time tailwind macros to SWC (and nextjs) a-la twin macro. The goal is to give the same great compile-time ergonomics and flexibility while performing considerably better than babel-based alternatives. Supports both emotion and styled-components for CSS-in-JS, and many build systems such as SWC, nextjs, Vite, etc.

Compatibility Chart

We are currently testing against the following versions. Other versions outside these may still work, however.

stailwc NextJS Emotion Styled Components swc Vite
latest 13.4.3 11.10.5 5.3.6 1.3.24 4.1.0

Feature Chart

Feature Emotion Styled Components
tw jsx attribute
tw template tag
tw component syntax
tw component extension syntax
Global styles
Plugin parameter suggestions

Getting started

> npm add -D stailwc
> yarn add -D stailwc
> pnpm add -D stailwc

To get started with NextJS, place the following in your next.config.js. For other framworks / tools, please see the examples.


const stailwc = require("stailwc/install");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    swcPlugins: [
        engine: "emotion", // or "styled-components"
  compiler: {
    emotion: true,
    // or
    styledComponents: true,

module.exports = nextConfig;

Optionally, you can also include the tailwind normalizer + forms plugin by including the <TailwindStyle /> component. Please see the relevant examples.


import { TailwindStyle } from "stailwc";

export default function App({ Component, pageProps }) {
  return (
      <TailwindStyle />
      <Component {...pageProps} />


There is one step you need to take to get types working. You need to add stailwc.d.ts to the root of your source folder.


The tw tag

You can interact with stailwc in two ways. The first is through the tw JSW attribute, and the second is via the tw template tag.

import { useState } from "react";

export const ColorButton = () => {
  const [clicked, setClicked] = useState(0);
  return (
      tw="p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3"
      css={clicked % 2 == 0 ? tw`border-green` : tw`border-blue`}
      onClick={() => setClicked(clicked + 1)}
      Clicked {clicked} times

Component syntax

You can also create styled components using the tw template tag. This will automatically create the correct syntax for both emotion and styled-components.

export const StyledButton = tw.button`p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3`;
export const ShadowButton = tw(StyledButton)`shadow-lg`;


There are examples available for both emotion and styled-components. You can run them by cloning the repo and running yarn followed by yarn dev in the example directory. You will need to stailwc first.


~198K SLoC