stailwc

STAILWC (Speedy Rückenwind Compiler)

Dies ist ein experimenteller SWC-Transpiler, um die Kompilierzeit-Tailwind-Makros in SWC (und NextJs) A-La Twin Makro zu bringen. Ziel ist es, die gleiche großartige Ergonomie und Flexibilität für Kompilierzeit zu verleihen und gleichzeitig wesentlich besser zu erzielen als Alternativen auf Babelbasierten. Unterstützt sowohl emotion als auch styled-components für CSS-in-Js und viele Build-Systeme wie SWC, NextJs, Vite usw.

Kompatibilitätsdiagramm

Wir testen derzeit gegen die folgenden Versionen. Andere Versionen außerhalb dieser können jedoch noch funktionieren.

Stailwc	NEXTJS	Emotion	Gestaltete Komponenten	SWC	Vite
letzte	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Feature -Diagramm

Besonderheit	Emotion	Gestaltete Komponenten
tw JSX -Attribut	✅	✅
tw -Tag	✅	✅
tw -Komponentensyntax	✅	✅
tw -Komponentenerweiterungssyntax	✅	✅
Globale Stile	✅	✅
Plugin -Parametervorschläge	✅	✅

Erste Schritte

 > npm add -D stailwc
> yarn add -D stailwc
> pnpm add -D stailwc

Um mit NextJs zu beginnen, platzieren Sie Folgendes in Ihrem nächsten.config.js. Für andere FramWorks / Tools finden Sie in den Beispielen.

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 ;

Optional können Sie auch den Tailwind Normalizer + Forms Plugin einfügen, indem Sie die <TailwindStyle /> -Komponente einbeziehen. Bitte beachten Sie die entsprechenden Beispiele.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

Typen

Es gibt einen Schritt, den Sie unternehmen müssen, um Typen zum Laufen zu bringen. Sie müssen stailwc.d.ts zum Stammpunkt Ihres Quellordners hinzufügen.

Verwendung

Das tw -Tag

Sie können auf zwei Arten mit Stailwc interagieren. Das erste ist das tw JSW -Attribut, und das zweite erfolgt über das tw -Template -Tag.

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

Komponentensyntax

Sie können auch mit dem tw -Vorlagen -Tag gestylte Komponenten erstellen. Dadurch werden automatisch die richtige Syntax für emotion und styled-components erstellt.

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

Beispiele

Es gibt Beispiele für emotion und styled-components . Sie können sie ausführen, indem Sie das Repo klonieren und yarn leiten, gefolgt von yarn dev im Beispielverzeichnis. Sie müssen zuerst stailwc .