Panda CSS

https://gyazo.com/b1fe548257fcf818953dd0ac920c16d5

ゼロランタイム指向の CSS in JS

TypeScript での使用がサポートされている

Chakra UI のチームが開発している

vanilla-extract、 Linaria などから影響を受けている

PostCSSのプラグインとして動作する

シンタックス

vanilla-extract のようなオブジェクトリテラルと、Linaria のようなテンプレートリテラルの両方を使用できる。

デフォルトはオブジェクトリテラルだが設定ファイルで切り替えができる。

code:tsx

// オブジェクトリテラルの場合

const styles = css({

backgroundColor: 'gainsboro',

padding: '10px 15px'

})

// テンプレートリテラルの場合

const Container = styled.div`

background-color: gainsboro;

padding: 10px 15px;