ReactにTilwind CSSとEmotionインストールして快適な開発を

cssをTilwind CSSとEmotionを使うことで管理しやすい環境を構築しました。その導入編です。

導入するきっかけ
他のワークフレーム
BooStrap
Sass Pure CSS, Foundation等
Tilwind CSS
tailwindを使ってみて良かったこと悪かったこと
導入する
Emotionをインストールする
Tailwindをインストールする
tailwindのconfigを追加する
使用してみる
導入後に困ったこと
まとめ

導入するきっかけ

プレーンのcssってなんであんなに大変なのだろうかもうヤダ、今の時代こんなに煩わしいプログラム？を触ってられるか。
ということで、ワークフレームを導入しようと考えました。そこでようやく出会ったのが TilwindとEmotionです。もちろん初めは難しいと感じましたが今は導入して本当に良かったと思っています。これからも使っていきます。

他のワークフレーム

まず、代表的なBooStrap,Sassなど試してみたり、Pure CSS,Foundationを触ってみたりしました。が、この子達と仲良くできなかったです。

BooStrap

とても有名な物で簡単に装飾ができます。
私に合わなかった理由としては結局BooStrapを逸脱したデザインになるとcssを書くしか無く、BooStrapとCSS両方をマスターしないと使えない。
そして一番の原因はBooStrapとcss両方で書いてしまうと管理しきれず、細かい修正に膨大な作業が発生してしまい。これならcssだけの方が楽だったな...となって導入を後悔しました。

Sass Pure CSS, Foundation等

その他の物に関しては、私が記述を覚えきれないのも原因でありますが、導入しても記述量が減った感覚がほとんど無いためです。 Sassなどは略して書けるのはいいのですが、結局一から書いている気が...もっと楽したいです。

Tilwind CSS

Tilwindはcssのワークフレームです。初めからclass名が用意されていて利用する時はタグにクラスを入れるだけです。BooStrapと一緒なのでは？と思いますが違います。
BooStrapはデザインされている物を選んでクラスを記述する。Tilwindは用意されているクラスでスタイリングしていきます。
BooStrapとTilwindCSSとプレーンのCSSを一言でたとえるなら、BooStrapは完成された製品を選ぶ、Tilwindは部品を選ぶCSSは設計書から始める。そのためBooStrapと比べると必然的にTilwindの方が記述は増えます。

tailwindを使ってみて良かったこと悪かったこと

私が使用して良かったことは

1.クラス名を書くだけなので記述量が減った
2.メディアクエリーの記述が楽になった。
3.fontサイズの指定が楽になった
4.色の指定が楽になった。
5.margin,paddingの数値を悩まなくなった。
6.クラス名を定義しないため「英語」を間違えなくなった
7.インテリジェンス機能があるためクラス名を間違えずに書けた。

特にメディアクエリーがとても助かっています。プレーンcssだとモバイル版、タブレット版、PC版でどこに何を記述すればいいのか悩んだり、時間の無い中修正、修正、修正...となるともう管理できなくなりました。導入後その悩みが無くなりました。 tailwindはテンプレート的にクラスが用意されているだけなのでカスタムも非常に簡単です。

不満に感じる部分は

1.HTML内のクラスがとても長くなります。HTMLが見づらい、汚いコードになります。
2.HTMLタグに対してその都度クラスを指定しないといけない。その対策に@applyをしてしまうと結局cssのコードが汚れて行き管理ができなくなってしまう。
3.メディアクエリーの記述を一括記述できない。

上記1と2はプレーンのHTMLとTailwindを利用する場合に発生します。そのためCSS-in-JS(Emotion)等を使用しない場合Tailwindはあまりおすすめできません。 CSS-in-JSを使った場合3の不満があります。

導入する

導入すると言ってもとても簡単です

Emotionをインストールする

npm i @emotion/css @emotion/styled @emotion/react

Tailwindをインストールする

tailwindcssも必要になった。~~Tailwindの通常の物は使用しません。twin.macroを使用します。~~

2.8で問題なかったがtwin.macroが3.0以上になってエラーが発生してしまった。tailwindcssもインストールします。

npm install twin.macro tailwindcss

一応tailwindcssがない場合のエラー内容も記載

error - ./node_modules/twin.macro/macro.js:5:15
Module not found: Can't resolve 'tailwindcss/lib/util/toPath'

tailwindのconfigを追加する

npx tailwindcss init

以上終わり。

使用してみる

npx create-react-app my-appで作成したもので解説します。

App.js

import logo from './logo.svg';
import './App.css';
import styled from "@emotion/styled" //<--これ
import { css } from '@emotion/css';//<--これ
import tw from "twin.macro";//<--これ

function App() {
  const BaseFontSize =css `${tw`text-sm text-yellow-600 lg:text-4xl`}`//<--これ
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <p className={BaseFontSize}>toretate</p>{/*<--これ*/}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

文字の色とサイズが変更されました react-tailwind

私はvisualstudioを使用しているのですが、インテリジェンスもあるので助かります。 tailwind-vs 拡張機能を追加してみてください。

導入後に困ったこと

1.TilwindもEmotionもやはり慣れが必要です慣れるまで少し時間がかかりました。
2.情報があまり多くないのでいきなり２つのワークフレームを導入したことで何が原因で正常に機能していないのか切り分けが難しかった。
3.Tilwindの記述方法が分からなかったので公式を常に開いた状態で毎回確認しながらやっていた。公式ページが分かりやすかったので非常に助かりました。
3.疑似クラス等特殊な記述方法が分からなかったEmotionの方も色々と検索していました。

まとめ

私個人の意見としてはTilwind CSSとEmotionを導入はメリットしか感じられない。メンテナンス性、カスタマイズ性、作業効率、どれにおいても格段に良くなりました。ただ単にTilwind CSSだけ、Emotionだけを導入するのはメリットが薄い気がします。やはり両方を組み合わせることでかなり良くなりました。
しかし、Reactや、Vue、AngularのJavascriptフレームワークを使用しないHTML+Tilwindは逆におすすめできません。導入するとしても本業がデザイナーの方には導入や、独自の記述方法は少し難しいとは感じます。
私は今後ともこのTilwind CSSとEmotionを使い続けて行くと思います。次回具体的な使用方法です