stailwc

Stailwc (компилятор Speedy Tailwind)

Это экспериментальный транспилер SWC, который принесет макросы с компиляцией Time While Macros SWC (и NextJs) A-La Twin Macro. Цель состоит в том, чтобы дать такую же великую эргономику и гибкости, выполняя значительно лучше, чем альтернативы на базе Babel. Поддерживает как emotion , так и styled-components для CSS-In-JS, и многие системы сборки, такие как SWC, NextJS, VITE и т. Д.

Диаграмма совместимости

В настоящее время мы тестируем на следующие версии. Однако другие версии за пределами этого могут работать.

Stailwc	NextJs	Эмоция	Стилизованные компоненты	SWC	Просие
последний	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, поместите следующее на heally.config.js. Для других Framworks / Tools см. Примеры.

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 ;

Необязательно, вы также можете включить плагин Tailwind Normalizer + Forms, включив компонент <TailwindStyle /> . Пожалуйста, смотрите соответствующие примеры.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

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

Типы

Есть один шаг, который вам нужно сделать, чтобы заставить работать типы. Вам нужно добавить stailwc.d.ts в корень вашей исходной папки.

Использование

tw TAG

Вы можете взаимодействовать со 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 . Вы можете запустить их, клонируя репо и запустив yarn , а затем yarn dev в каталоге примеров. Вам нужно будет сначала stailwc .