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