快速上手：stailwc——Tailwind CSS 编译加速器

项目介绍

stailwc（speedy tailwind compiler）是一个实验性的 SWC 转译器，旨在为 SWC（以及 Next.js）带来编译时的 Tailwind CSS 宏支持，类似于 twin.macro。其目标是提供与 Babel 替代方案相同的编译时便利性和灵活性，同时显著提升性能。stailwc 支持 emotion 和 styled-components 两种 CSS-in-JS 方案，并且兼容多种构建系统，如 SWC、Next.js、Vite 等。

项目技术分析

stailwc 的核心技术基于 SWC（Speedy Web Compiler），这是一个高性能的 JavaScript 和 TypeScript 编译器。通过将 Tailwind CSS 的宏处理集成到 SWC 中，stailwc 能够在编译时处理 Tailwind 的样式，从而避免了运行时的性能损耗。此外，stailwc 还支持 emotion 和 styled-components，使得开发者可以在不同的 CSS-in-JS 方案之间自由选择。

项目及技术应用场景

stailwc 特别适合以下场景：

• Next.js 项目：如果你正在使用 Next.js 开发项目，并且希望在编译时处理 Tailwind CSS，stailwc 是一个理想的选择。它能够无缝集成到 Next.js 的构建流程中，提升开发效率。
• 高性能需求：对于需要高性能的 Web 应用，stailwc 通过在编译时处理样式，减少了运行时的开销，从而提升了应用的响应速度。
• CSS-in-JS 方案：无论你选择 emotion 还是 styled-components，stailwc 都能提供一致的开发体验，并且支持多种构建工具。

项目特点

• 高性能：基于 SWC 的高性能编译器，显著提升编译速度。
• 兼容性强：支持多种构建工具和 CSS-in-JS 方案，如 Next.js、Vite、emotion、styled-components 等。
• 灵活性：提供了 tw 标签和 tw 组件语法，开发者可以根据需求选择不同的使用方式。
• 易用性：安装简单，配置灵活，适合各种规模的开发团队。

快速开始

安装

npm add -D stailwc
# 或者
yarn add -D stailwc
# 或者
pnpm add -D stailwc

配置 Next.js

在 next.config.js 中添加以下配置：

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

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

module.exports = nextConfig;

使用示例

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

组件语法

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

总结

stailwc 是一个强大的工具，能够显著提升 Tailwind CSS 的编译性能，并且兼容多种构建工具和 CSS-in-JS 方案。无论你是 Next.js 开发者，还是需要高性能的 Web 应用，stailwc 都能为你带来显著的开发效率提升。快来尝试吧！