stailwc

stailwc (คอมไพเลอร์ Tailwind ที่รวดเร็ว)

นี่คือการทดลอง SWC transpiler เพื่อนำมาโคร Tailwind Tail Tail-Tail Tail ไปยัง SWC (และ NextJs) A-LA Twin เป้าหมายคือการให้การยศาสตร์และความยืดหยุ่นในการรวบรวมเวลาที่ยอดเยี่ยมเหมือนกันในขณะที่ทำงานได้ดีกว่าทางเลือกที่ใช้บาเบลอย่างมาก รองรับทั้ง emotion และ styled-components สำหรับ CSS-in-JS และระบบการสร้างจำนวนมากเช่น SWC, NextJS, VITE ฯลฯ

แผนภูมิความเข้ากันได้

ขณะนี้เรากำลังทดสอบกับเวอร์ชันต่อไปนี้ อย่างไรก็ตามเวอร์ชันอื่น ๆ ที่อยู่นอกสิ่งเหล่านี้อาจยังทำงานได้

stailwc	nextjs	อารมณ์	ส่วนประกอบสไตล์	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

ในการเริ่มต้นด้วย nextjs ให้วางสิ่งต่อไปนี้ใน next.config.js ของคุณ สำหรับเฟรม / เครื่องมืออื่น ๆ โปรดดูตัวอย่าง

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 ;

นอกจากนี้คุณยังสามารถรวมปลั๊กอิน Forms + Forms Tailwind Normalizer โดยรวมส่วนประกอบ <TailwindStyle /> โปรดดูตัวอย่างที่เกี่ยวข้อง

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

ตัวอย่าง

มีตัวอย่างสำหรับทั้ง emotion และ styled-components คุณสามารถเรียกใช้งานได้โดยโคลน repo และเรียกใช้ yarn ตามด้วย yarn dev ในไดเรกทอรีตัวอย่าง คุณจะต้อง stailwc ก่อน