stailwcダウンロードstailwcソースコードのダウンロード

stailwc

AI ソースコード

0.16.0

ダウンロード

Stailwc（スピーディーなテールウィンドコンパイラ）

これは、Compile Time TailwindマクロをSWC（およびNextJS）A-La Twin Macroにコンパイルする実験的なSWCトランスピラーです。目標は、バベルベースの代替品よりもかなり優れたパフォーマンスを発揮しながら、同じ素晴らしいコンパイル時間の人間工学と柔軟性を与えることです。 CSS-in-JSのemotionとstyled-components両方をサポートし、SWC、NextJS、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に配置します。他のFramworks / Toolsについては、例をご覧ください。

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 Normalizer + Formsプラグインを含めることもできます。関連する例をご覧ください。

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

種類

タイプを機能させるために必要な1つのステップがあります。 stailwc.d.tsソースフォルダーのルートに追加する必要があります。

使用法

`tw`タグ

2つの方法でStailwcと対話できます。 1つ目はtw JSW属性を介したもので、2つ目は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` ;