stailwc 다운로드 - stailwc 소스 코드 다운로드

stailwc

AI 소스 코드

0.16.0

다운로드

stailwc (Speedy Tailwind 컴파일러)

이것은 컴파일 타임 테일 윈드 매크로를 SWC (및 Nextjs) A-LA 트윈 매크로로 가져 오는 실험적인 SWC 트랜스 필러입니다. 목표는 바벨 기반 대안보다 훨씬 더 나은 성능을 발휘하면서 동일한 훌륭한 컴파일 타임 인체 공학 및 유연성을 제공하는 것입니다. CSS-in-JS의 emotion 및 styled-components 및 SWC, NextJ, Vite 등과 같은 많은 빌드 시스템을 지원합니다.

호환성 차트

우리는 현재 다음 버전에 대해 테스트하고 있습니다. 그러나이 외부의 다른 버전은 여전히 작동 할 수 있습니다.

Stailwc	다음 JS	감정	스타일링 된 구성 요소	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

다음 JS로 시작하려면 다음을 다음에 놓으십시오 .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 } />
    </ >
  ) ;
}

유형

유형을 작동시키기 위해 취해야 할 단계가 하나 있습니다. 소스 폴더의 루트에 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` ;