stailwc

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.

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;

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

_document.tsx

import { TailwindStyle } from "stailwc";

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

Types

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.

Usage

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 (
    <button
      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
    </button>
  );
};

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`;

Examples

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.