はじめに
初めまして。HITOTSU株式会社の大塚正樹です。HITOTSUアドベントカレンダーの２日目担当します！
Gatsby x Tailwindでサイトを作った数ヶ月後に、別プロジェクトでGatsby x Linariaを使いました。TailwindとLinariaを比べるような形となったのですが、圧倒的にLinariaの方が良かったシェアします。
Tailwindとは
ユーティリティファーストのCSSフレームワークです。 ユーティリティファーストとは、素のcssを使わずに、Tailwind CSSが用意しているユーティリティクラスを主に使ってスタイリングしていく考え方です。
Linariaとは
ゼロランタイムのCSS in JSライブラリです。
ゼロランタイムとは、CSS in JSのの構文でスタイルを書きますが、そのCSSはビルド時にCSSファイルに生成されるというもの。
CSS in JSとは、JavaScriptを用いてCSSを記述するアプローチです。CSSはコンポーネントに定義され、外部のCSSファイルに依存することなく、コンポーネント単体で独立します。
tailwindのここが嫌い
・詳細度が考慮されてない
Tailwindで開発している中で1番大変だったのが、詳細度の問題。gatsbyが生成するCSSに負けることが多々あり、importantを多用する羽目に。。。
・レスポンシブ対応するとインラインのクラスが読みにくくなる。
Tailwindのレスポンシブ対応は、下記のようにsm:やmd:に続けて書くのですが、読みにくい。都度都度mdを書かなければいけなかったり、flexやmxなど意味で分けると、mdやsmが交互に混じりこむ形に。。。
<div className="flex flex-col md:flex-row items-center justify-around md:mt-12 mx-9 sm:mx-40 md:mx-0">
Linariaのここが好き
・読みやすさ
htmlとCSSがコンポーネント化されており、個人的にはインラインよりも読みやすいと感じました。
import { families, sizes } from './fonts';
// Write your styles in `styled` tag
const Title = styled.h1`
font-family: ${families.serif};
`;
const Container = styled.div`
font-size: ${sizes.medium}px;
color: ${props => props.color};
border: 1px solid red;
&:hover {
border-color: blue;
}
${Title} {
margin-bottom: 24px;
}
`;
// Then use the resulting component
<Container color="#333">
<Title>Hello world</Title>
</Container>;
・やはり速い！
ゼロランタイムともあり、速いと感じます！実際に、Linariaで作った方はpagespeed insightでtailwindよりも高い評価を記録しました！（もちろん作ったサイトのコンテンツが違うので一概には言えませんが。）
まとめ
Tailwindは個人的には好きにはなりませんでした。特に詳細度の問題には気をつけて頂ければと思います。一方、Linariaはおススメです！是非使ってみてください！
次のアドベントカレンダーの担当は、知識の幅がすごい@miyatomoさんです！