stailwc

STAILWC (Compiler Tailwind Speedy)

Ini adalah transpiler SWC eksperimental untuk membawa makro tailwind waktu kompilasi ke SWC (dan NextJS) A-LA Twin Macro. Tujuannya adalah untuk memberikan ergonomi dan fleksibilitas kompilasi waktu yang sama sambil melakukan jauh lebih baik daripada alternatif berbasis Babel. Mendukung styled-components emotion dan gaya untuk CSS-in-Js, dan banyak sistem pembuatan seperti SWC, NextJs, vite, dll.

Bagan Kompatibilitas

Kami sedang menguji terhadap versi berikut. Namun, versi lain di luar ini mungkin masih berfungsi.

Stailwc	Nextjs	Emosi	Komponen gaya	swc	Vite
terbaru	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Bagan fitur

Fitur	Emosi	Komponen gaya
Atribut tw JSX	✅	✅
Tag template tw	✅	✅
Sintaks komponen tw	✅	✅
Sintaks ekstensi komponen tw	✅	✅
Gaya global	✅	✅
Saran Parameter Plugin	✅	✅

Memulai

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

Untuk memulai dengan NextJS, tempatkan yang berikut di Next.config.js Anda. Untuk bingkai / alat lain, silakan lihat contohnya.

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 ;

Secara opsional, Anda juga dapat menyertakan plugin Formorizer + Forms Tailwind dengan memasukkan komponen <TailwindStyle /> . Silakan lihat contoh yang relevan.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

Tipe

Ada satu langkah yang perlu Anda ambil untuk membuat jenis bekerja. Anda perlu menambahkan stailwc.d.ts ke akar folder sumber Anda.

Penggunaan

Tag tw

Anda dapat berinteraksi dengan STAILWC dalam dua cara. Yang pertama adalah melalui atribut tw JSW, dan yang kedua adalah melalui tag tw Template.

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

Sintaks komponen

Anda juga dapat membuat komponen bergaya menggunakan tag tw Template. Ini secara otomatis akan membuat sintaks yang benar untuk komponen emotion dan 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` ; 

Contoh

Ada contoh yang tersedia untuk komponen emotion dan styled-components . Anda dapat menjalankannya dengan mengkloning repo dan menjalankan yarn diikuti oleh yarn dev dalam direktori contoh. Anda harus stailwc dulu.