ReactとTailwind CSS、Emotionを使ったWebサイト開発の実践的なテクニック

作成日:2022-09-21

Tilwind CSSとEmotionの具体的な使用方法

導入したけど記述方法が分からない.特殊な使い方ができず困ったことがあったので、どのように記述したらいいのかをまとめました。

TilwindとEmotion使い方
基本的な使い方
Styled OR CSS
twでスタイリング
色々な記述方法
擬似クラス要素
複数のコンポーネントに指定する
複数のクラスを適用する
条件を付けてクラス指定
Tailwindのカスタム
細かい取り決め
宣言は大文字
Text関係
color
メディアクエリー
tailwindの微調整
まとめ

TilwindとEmotion使い方

前回は導入までをしました。今回は実際どうやって記述すればいいのかTilwindとEmotionを使った記述方法を書きます。

基本的な使い方

Styled OR CSS

まずスタイルを適用する方法として、「styled-components」と「css」の二つの記述方法があります。どちらも一長一短なので好みで。

import { css } from '@emotion/css';
import styled from '@emotion/styled';

const EmotionCSSbluetext =  css`color : #00f `
const EmotionStyled = styled.p`color:#00f`
//省略...
  return (
  <div>
  <p className={EmotionCSSbluetext}>EmotionCSSbluetext</p>
<EmotionStyled>EmotionStyled</EmotionStyled>
  </div>)

twでスタイリング

今度こそtwin.macroを使用します。

import { css } from '@emotion/css';
import styled from '@emotion/styled';
import tw from "twin.macro";//<--これ
//省略...
const EmotionCSSbluetext=css`${tw`text-blue-400`}`;
const EmotionStyled = styled.p`${tw`text-2xl`}`

const Component1 = (()=>{
  return (<div>
    <p className={EmotionCSSbluetext}>EmotionCSSbluetext</p>
<EmotionStyled>EmotionStyled</EmotionStyled>
  </div>)
})

色々な記述方法

上記までの手順は特に問題もなく使用できると思います。
しかし擬似クラス、要素や、条件付き、複数使用する場合など複雑な記述方法が必要な場合があります。

擬似クラス要素

普通にelementを指定するだけで大丈夫です。
tailwindを使用する場合は疑似要素ごとに新たに追記する必要があります。

const EmotionCSSGreen = css`${tw`text-2xl`}
li {
  ${tw`text-green-300`}
}
`;
const EmotionStyled = styled.ul`${tw`text-2xl`}
li {
  ${tw`text-red-400`}
}
`
  return (<div>
    <ul className={EmotionCSSGreen}>
      リスト
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>
    
    <EmotionStyled>
      リスト
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </EmotionStyled>
  </div>)

const EmotionCSSGreen = css`${tw`text-2xl list-none`}
  ::first-letter{
    color:yellow ;
    ${tw` text-4xl`}
  }
  li {
  ${tw`text-green-300`}
  }
  p {
    font-size:3rem;
  }
`;
const EmotionStyled = styled.ul`${tw`text-2xl`}
  list-style: none;
  li {
   ${tw`text-red-400`}
   &::before{
     content: "◆";
    font-weight: bold;
     color: skyblue;
    }
  :hover {
    ${tw`text-black`}
  }
}
`
  return (<div>
    <ul className={EmotionCSSGreen}>
      リスト
      <p>pタグ</p>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>

    <EmotionStyled>
      リスト
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </EmotionStyled>
  </div>)

//hover first-line
const EmotionCSSGreen = css`${tw`text-2xl list-none hover:text-5xl`}`;
const EmotionStyled = styled.ul`${tw`text-2xl first-line:text-purple-600`}`

複数のコンポーネントに指定する

AコンポーネントとBコンポーネントがあり、どちらもテキストサイズや太さのみ同じであってほしいが、色はそれぞれ指定したい時。同じコードを二回書くのは面倒で修正も大変になってしまう。そういう場合はスタイルだけをまとめてしまう。

const Text = tw` font-light sm:font-medium md:font-semibold lg:font-bold
text-sm sm:text-base md:text-xl lg:text-2xl `;
const Bgcolor = css`background-color: #333`
const AComponent = css`${tw`text-blue-300`}${Text}  ${Bgcolor}`;
const BComponent = css`${tw`text-green-500`}${Text}   ${Bgcolor}`;


  return (<div>
<p className={AComponent}>AComponent</p>
<p className={BComponent}>BComponent</p>
  </div>)

複数のクラスを適用する

className={css}と一つを与えているがこれを複数にする場合。簡単にできると思ったのだが結構癖がある
一つはサイズ、もう一つは色を指定し、適用させた。

const Selection = css`${tw`text-3xl`}`;
const News = css`${tw`text-green-500`}`;
  return (<div>
    <p className={`${Selection} ${News}`}>Selection + News</p>
  </div>)

条件を付けてクラス指定

特定の条件下でクラスを適用させたい場合document.getElementやrefを使えばもちろん実現できるが条件 (三項) 演算子で実現することが可能です。

const Textsize = css`${tw`text-3xl`}`
const Selection = css`${tw`text-red-500`}`;
const Disselection = css`${tw`text-green-500`}`;

  const [booleanstate , setbooleanstate] = useState(true);
  return (<div>
    <button onClick={(()=>{setboolenstate(!booleanstate)})}>BooelnCahge</button>
    <p className={`${Textsize} ${booleanstate ? Selection : Disselection }`}>Selection + News</p>
  </div>)

ボタンクリックで色が変更できました。 tw-boolean

Tailwindのカスタム

標準で用意されている色ではまかなえない、他のサイズや、色等を使用する場合tailwind.config.jsを修正しましょう。 tailwind.config.jsが存在しない場合は以下のコマンドで作成されます。

npx tailwindcss init

作成されたconfigファイル

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {// ここに記入すると上書きされる
    extend: {//ここに記入すると追加される},
  },
  plugins: [],
}

実際に修正してみた結果テキストサイズを書き換えました

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    fontSize: {
      'test1': '.6rem',
      'test2': '.775rem',
      'test3': '.85rem',
      'test4': '0.9rem',
      'test5': '1.325rem',
      'test6': '1.4rem',
      'test7': '1.5rem',
      'test8': '2rem',
      'test9': '2.25rem',
      'test10': '3.3rem',
      'test11': '3.5rem',
      'test12': '3.8rem',
    },
    extend: {
      colors: {
        "b1" : "#fefefe",
        "b2" : "#cdf" ,
        "b3" : "#8b8" 
      }
    },
  },
  plugins: [],
}

書き変わった結果以下のように使用する事ができる

const Textsize = css`${tw`text-3xl`}`//これが使えない
const Textsize = css`${tw`text-test11`}`//これに変更された
const Disselection = css`${tw`text-b2`}`;//これが新たに使えるようになった

フォントサイズと色のみを挙げましたが、その他細かい仕様は公式ページを参考してください。一番下の方に記載されています。

細かい取り決め

正直「md: lg: text font 」とかを記入するとかなりわけがわからなくなります。そのためテキストに関係があるもの。背景に関係があるもの。マージン、パディングに関係があるもの。ボーダーに関係があるもの。それぞれまとめて、改行します。そうすることで見やすくなります。

const TEXTS = css`${tw`text-2xl sm:text-3xl md:text-4xl //text
leading-6 xl:leading-7 md:leading-8 //text
mb-1 lg:mb-3 xl:mb-5 mt-4 lg:mt-6 xl:mt-8 //margin padding
pl-3 md:pl-2 py-1 md:py-4   //  padding
border-l-8 border-b-2  border-b-gray-200 // border
`}`

宣言は大文字

const TEXTS = css`${tw`......}`

変数の頭は必ず大文字にしてください。

Text関係

text-smとかfont-mediumとか覚えづらく無いですか？configで全て変えて数字にしてしまいましょう。

「text-s1 text-h1」等

color

これもまた使わない色、使う色が決まっていると思うのでconfigに書きましょう。

メディアクエリー

Tailwindを使う理由としてメディアクエリーの指定が楽なので使用しています。メディアクエリーを追加すればもっと細かい条件指定ができます。configのextendに追加します。

tailwindの微調整

tailwindを使った微調整はもちろんできますが...微調整はconfigに書いてしまうか、Emotionを使いましょう

const Border = tw`border-bottom-width[0.5px] max-width[210px]`//<--これは極力使わない

まとめ

フレームワークの利用は最初は戸惑いますが、慣れてくれば楽になります。汎用性は無くなってしまいますが...
本当にプレーンのCSSだけは使いたくないと思いましたのでTailwind Emotionを使っていますが正直なんでも大丈夫だと思います。今回のこの記事でTailwind Emotionどのように使えばいいのか参考になれば幸いです。これまではreactの導入方法使用方法でしたがnext.jsでした場合少し設定が必要だったりするのでここに記載するべきかどうか迷っています。コメント頂ければお答えします。