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 performance and flexibility while performing considerably better than babel-based alternatives (about 11x faster in my experience, proper benchmarks coming soon!)
🚨 We currently only support NextJS 13.0.1
```bash
yarn add stailwc ```
Currently the setup process is a little bit convoluted, but it will be cleaned up in the future, once we determine the best way to package this. Place the following in your next.config.js:
next.config.js
```js const stailwc = require("stailwc/install");
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, experimental: { swcPlugins: [stailwc()], }, compiler: { emotion: true, }, };
module.exports = nextConfig; ```
Optionally, you can also include the tailwind normalizer + forms
plugin by including the <TailwindStyle /> component.
_document.tsx
```tsx import { Html, Head, Main, NextScript } from "next/document"; import { TailwindStyle } from "stailwc";
// currently needed due to a swc bug // === import { css, Global } from "@emotion/react"; css; Global; // ===
export default function Document() {
return (
Now get hacking!
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.
```tsx import { useState } from "react";
export const ColorButton = () => { const [clicked, setClicked] = useState(0); return ( ); }; ```