Slide 1
Slide 1 text
Thank you < >
What’s Next?
Ahoxa
April 18th, 2025
Slide 2
Slide 2 text
自己紹介
林原優仁 Hayashibara Yuto
‘25年3月 大阪大学経済学部卒業
‘25年4月 株式会社HRBrain 正式入社
u React, ReactNativq
u Hons
u Gs
u Blendeb
u Unity
u 週4ジム(行ってた
u 猫が世界を救う
‘24年8月 株式会社HRBrain インターン開始
経歴
趣味・スタック
@4h0xa
Slide 3
Slide 3 text
Contents
for today
< >よ、ありがとう
New Challengers
比べてみよう
比較まとめ
で、結局どれがいいの？
おまけ（CSS抽出）
Slide 4
Slide 4 text
styled-components が
maintenance mode に
< >よ、ありがとう
Slide 5
Slide 5 text
New Challengers
Tailwind
「説明不要。」
Vanilla-extract
SCSSの亡霊に取り憑かれし
TypeScripterへ
Linaria
styled が忘れられないあなたへ
Slide 6
Slide 6 text
Lorem ipsum dolor
sit amet,
consectetur
adipiscing elit, sed
do eiusmod tempor
Slide 7
Slide 7 text
比べてみよう
1
2
3
4
< class="bg-gray-500 hover:bg-gray-600
px-4 py-2 rounded">
Click Me
button
button
Click me
クソ長class上等！
Purgeでビルド時に超軽量
デザインシステムと相性◎
習うより慣れよ
Tailwind CSS
Slide 8
Slide 8 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import from
const
{ styled } ;
Click Me
RedButton styled.button
;
'@linaria/react'
`
background-color: rgba(222, 222, 222, 1);
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
border: none;
cursor: pointer;
&:hover {
background-color: rgba(222, 222, 222, 0.6);
}
`
=
Click Me
見た目は 、中身はCSS！
ビルド時に静的解析してCSSを抽出
型補完はちょっと弱め
Linaria
比べてみよう
Slide 9
Slide 9 text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import from
export const
{ style } ;
redButton ({
backgroundColor ,
color ,
padding ,
borderRadius ,
border ,
cursor ,
selectors {
{
backgroundColor ,
},
},
});
'@vanilla-extract/css'
'#ef4444'
'white'
'0.5rem 1rem'
'0.375rem'
'none'
'pointer'
'#dc2626'
=
:
:
:
:
:
:
:
:
:
style
'&:hover'
Click Me
1
2
3
4
5
6
import as from './styles.css.ts'
styles
className styles redButton
Click Me
*
button
button
;
< ={ . }>
型！型！型！
学習コストはあるけど、所詮はCSS
ビルド時に.cssファイルとして出力
スケーラブルな設計
Vanilla-extract
比べてみよう
Slide 10
Slide 10 text
CSS比較表
項目 Tailwind CSS Linaria vanilla-extract
型安全性 △ △
スケーラビリティ 中 中〜高 高
初心者フレンドリー ◎ ○ △
AI親和性 ○ △
Slide 11
Slide 11 text
で、結局どれがいいの？
CSSにこだわりがない → Tailwind
styled-componentsが恋しい → Linaria
スケーラブルにガチりたい → vanilla-extract
Slide 12
Slide 12 text
どうやって CSS を抽出してるの？
PostCSS / JIT クラス名解析 + 最低限のCSS
Vite / Webpack 静的構文解析 + 全て反映
Babel / Vite TSファイルをコンパイル + 全て反映
Slide 13
Slide 13 text
Thank you!
Reach out to me if you have
Questions.