stailwc

Stailwc (compilador veloz de vento de cauda)

Este é um transpiler experimental do SWC para trazer macros de compilação de vento de Tailwind para o SWC (e NextJS) A-La Twin Macro. O objetivo é dar a mesma ergonomia e flexibilidade do excelente tempo de compilação, com um desempenho consideravelmente melhor do que as alternativas baseadas em Babel. Suporta styled-components emotion e com estilo para CSS-in-JS, e muitos sistemas de construção como SWC, NextJs, Vite, etc.

Gráfico de compatibilidade

Atualmente, estamos testando contra as seguintes versões. Outras versões fora disso ainda podem funcionar, no entanto.

Stailwc	NextJs	Emoção	Componentes estilizados	SWC	Vite
mais recente	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Gráfico de recursos

Recurso	Emoção	Componentes estilizados
atributo tw jsx	✅	✅
tag tw	✅	✅
tw Sintaxe do componente	✅	✅
tw Sintaxe de extensão de componentes	✅	✅
Estilos globais	✅	✅
Sugestões de parâmetros do plug -in	✅	✅

Começando

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

Para começar com o NextJs, coloque o seguinte em seu próximo.config.js. Para outros Framworks / Ferramentas, consulte os exemplos.

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 ;

Opcionalmente, você também pode incluir o plugin Normalizador + Forms do Tailwind +, incluindo o componente <TailwindStyle /> . Por favor, veja os exemplos relevantes.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

Tipos

Há um passo que você precisa dar para fazer com que os tipos funcionem. Você precisa adicionar stailwc.d.ts à raiz da sua pasta de origem.

Uso

A tag tw

Você pode interagir com o Stailwc de duas maneiras. O primeiro é através do atributo tw JSW, e o segundo é através da tag tw do modelo.

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

Sintaxe do componente

Você também pode criar componentes com estilo usando a tag tw do modelo. Isso criará automaticamente a sintaxe correta para emotion e 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` ; 

Exemplos

Existem exemplos disponíveis para emotion e styled-components . Você pode executá -los clonando o repositório e executando yarn seguido de yarn dev no diretório de exemplo. Você precisará se stailwc primeiro.