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

作成日:2022-09-21

Tags: React emotion tailwind

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>)
Emotion-styledorCSS.png

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>)
})
twstyle-base

色々な記述方法

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

擬似クラス要素

普通に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>)
tw-list1 
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>)
tw-list2 
//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`}`
tw-hover

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

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>)
tw-ABcomponent

複数のクラスを適用する

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>)
tw-two-class

条件を付けてクラス指定

特定の条件下でクラスを適用させたい場合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でした場合少し設定が必要だったりするのでここに記載するべきかどうか迷っています。コメント頂ければお答えします。

目次

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

関連記事

aboutstripe

2022-07-26

ネット決済ができるStripeを使ってみる
react-load-localfile

2024-04-09

Reactでローカルの外部ファイルを読み込む
react-table

2023-08-29

React-table V8
react_firebase2

2022-05-20

Reactでfirebase操作してみる
gatsby-to-next

2023-12-06

GatsbyからNextjsに移行した理由
nextjs13-beta-emotion

2022-11-17

nextjs13にemotion tailwind

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください