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
tw
tag
The 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.