stailwc

StailWC (compilateur Speedy Tailwind)

Il s'agit d'un transpiler SWC expérimental pour apporter des macros de vent arrière de compilation à la macro jumeau SWC (et NextJS) A-LA. L'objectif est de donner la même grande ergonomie et la flexibilité en temps de compilation tout en fonctionnant considérablement mieux que les alternatives basées sur Babel. Soutient à la fois emotion et styled-components pour CSS-in-JS, et de nombreux systèmes de construction tels que SWC, NextJS, VITE, etc.

Graphique de compatibilité

Nous testons actuellement les versions suivantes. Cependant, d'autres versions à l'extérieur peuvent encore fonctionner.

stailwc	NextJS	Émotion	Composants stylisés	swc	Vite
dernier	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Graphique de fonctionnalité

Fonctionnalité	Émotion	Composants stylisés
Attribut tw JSX	✅	✅
Tag de modèle tw	✅	✅
Syntaxe des composants tw	✅	✅
Syntaxe d'extension des composants tw	✅	✅
Styles mondiaux	✅	✅
Suggestions de paramètres du plugin	✅	✅

Commencer

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

Pour commencer avec NextJS, placez ce qui suit dans votre prochain.config.js. Pour les autres framworks / outils, veuillez consulter les exemples.

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 ;

Facultativement, vous pouvez également inclure le plugin Tailwind Normalizer + Forms en incluant le composant <TailwindStyle /> . Veuillez consulter les exemples pertinents.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

Types

Il y a une étape que vous devez prendre pour faire fonctionner les types. Vous devez ajouter stailwc.d.ts à la racine de votre dossier source.

Usage

Le tw tw

Vous pouvez interagir avec StailWC de deux manières. Le premier passe par l'attribut tw JSW, et le second est via la balise 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 >
  ) ;
} ;

Syntaxe des composants

Vous pouvez également créer des composants stylisés à l'aide de la balise tw . Cela créera automatiquement la syntaxe correcte pour les composants emotion et 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` ; 

Exemples

Il existe des exemples disponibles pour emotion et styled-components . Vous pouvez les exécuter en clonage le référentiel et en cours d' yarn suivi de yarn dev dans l'exemple de répertoire. Vous devrez d'abord stailwc .