stailwc (快速 Tailwind 编译器)

这是一个实验性的 SWC 转译器，旨在将编译时 Tailwind 宏带到 SWC (和 nextjs) 中，类似于 twin macro。目标是提供与基于 babel 的替代方案相当出色的编译时舒适性和灵活性，同时性能明显优于后者。支持 emotion 和 styled-components 的 CSS-in-JS，以及许多构建系统，如 SWC、nextjs、Vite 等。

兼容性图表

我们目前正在测试以下版本。其他版本可能仍然有效，但可能不在这些版本之列。

功能图表

入门指南

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

要开始使用 NextJS，请将以下内容放置在您的 next.config.js 中。有关其他框架/工具，请参阅示例。

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;

可选地，您还可以通过包含 <TailwindStyle /> 组件来包含 Tailwind 正规化器 + 表单插件。请参阅相关示例。

_document.tsx

import { TailwindStyle } from "stailwc";

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

类型

为了使类型正常工作，您需要执行以下步骤。您需要将 stailwc.d.ts 添加到源文件夹的根目录。

用法

tw 标签

您可以通过两种方式与 stailwc 交互。第一种是通过 tw JSW 属性，第二种是通过 tw 模板标签。

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>
  );
};

组件语法

您还可以使用 tw 模板标签创建样式化组件。这将自动为 emotion 和 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`;

示例

提供了关于 emotion 和 styled-components 的示例。您可以通过克隆仓库并在示例目录中运行 yarn 后跟 yarn dev 来运行它们。您需要首先运行 stailwc。