stailwc下载 - stailwc源代码下载

stailwc

Ai源码

0.16.0

下载

Stailwc（快速的尾风编译器）

这是一个实验性的SWC转侧，可将编译时间的后风宏带到SWC（和NextJS）A-LA Twin宏。目的是提供相同的良好编译时间人体工程学和灵活性，同时表现出比为基于Babel的替代方案好得多。支持CSS-In-JS的emotion和styled-components ，以及许多构建系统，例如SWC，NextJ，Vite等。

兼容图

我们目前正在针对以下版本进行测试。但是，这些以外的其他版本可能仍然有效。

Stailwc	nextjs	情感	样式的组件	SWC	Vite
最新的	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

功能图

特征	情感	样式的组件
`tw` JSX属性	✅	✅
`tw`模板标签	✅	✅
`tw`组件语法	✅	✅
`tw`组件扩展语法	✅	✅
全球风格	✅	✅
插件参数建议	✅	✅

入门

 > 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 />组件来包含paryandormanizer +表单插件。请参阅相关示例。

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