Tailwind css Emotionは結局どうだったのか？効率的な使い方とは？を個人的な観点でお話していきます。
１年以上使っていますが、結論からいうと導入して良かったと思っています。
cssの管理がしやすい、プレーンのcssの場合3000行ぐらいなるだろうなと思う記述もコンポーネント化して、再利用できるのでかなりコード量が減って助かっています。コード記述量、管理が楽になった実感があります。
もちろん良いことばかりではありません。
この２つのモジュールが原因かは定かではありませんが、おそらくstyled-componentsによるレイアウト崩れFOUC（Flash of unstyled content）が発生したり、無駄に多いcssが読み込まれたり(ネットワーク使用量圧迫)、他の人とのプロジェクト共有が難しくなったり、一部反応しないcssがあったり、cssを追記しないといけなかったり...
それでも総合的に見て導入する方が楽になると感じられます。
コードの書き方はそれぞれなので一個人の書き方だということをご理解ください。
tailwind.configに記述することで、tailwindのクラスを再定義、追加することができます。
これを使ってfontサイズを数字にしていきます。
デフォルトは次のようになっています。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {// ここに記入すると上書きされる
extend: {//ここに記入すると追加される},
},
plugins: [],
}
}
カスタム後はこんな感じです。
module.exports = {
content: [
],
theme: {
fontSize: {
's1': '.8rem',
's2': '.875rem',
's3': '.95rem',
's4': '1rem',
's5': '1.225rem',
's6': '1.4rem',
's7': '1.6rem',
's8': '2rem',
's9': '2.25rem',
's10': '3rem',
's11': '3.3rem',
's12': '3.8rem',
},
fontWeight: {
'w1': '200',
'w2': '300',
'w3': '400',
'w4': '500',
'w5': '600',
'w6': '700',
'w7': '800',
},
extend: {
text:{
'mm' : 'font-size: 0.5rem; line-height: 1rem;'
},
width : {
'100' : '28rem',
'120' : '32rem',
'140' : '36rem',
'160' : '40rem',
'180' : '42rem',
'200' : '44rem',
'sc1' : '20vw',
'sc2' : '25vw',
'sc3' : '28vw',
'sc4' : '33.33vw',
'sc5' : '50vw',
'sc6' : '60vw',
'sc7' : '70vw',
'sc8' : '80vw',
'sc9' : '90vw',
},
height : {
'100' : '28rem',
'120' : '32rem',
'140' : '36rem',
'160' : '40rem',
'180' : '42rem',
'200' : '44rem',
'sc1' : '20vh',
'sc2' : '25vh',
'sc3' : '28vh',
'sc4' : '33.33vh',
'sc5' : '50vh',
'sc6' : '60vh',
'sc7' : '70vh',
'sc8' : '80vh',
'sc9' : '90vh',
} ,
maxWidth: {
'p1': '5px',
'p2': '10px',
'p3': '15px',
'p4': '20px',
'p5': '30px',
'p6': '50px',
'p7': '80px',
'p8': '100px',
'p9': '120px',
'p10': '150px',
'p11': '200px',
'p12': '300px',
},
},
mx: {
'0.25': 'margin-left: 0.25rem margin-right: 0.25rem'
},
},
plugins: [],
}
主な修正内容は以下の通りです。
共通項目はコンポーネント化してまとめてしまいます。
EmotionsComponent.jsというファイルを作成し、次のようにコードを書きます。
import tw from 'twin.macro';
import { css } from '@emotion/css'
import styled from '@emotion/styled';
export const EmotionWapper = {
Mainbox: styled.div`${tw`px-2 xl:px-0 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-sc9 mx-auto`}`,
Wapper: styled.div`${tw`sm:w-sc9 md:w-sc8 mx-auto ml-auto`}width :95vw;
`}
export const EmotionFonts = {
s1:tw`text-s1 sm:text-s2 md:text-s3 lg:text-s4`,
s2:tw`text-s2 sm:text-s3 md:text-s4 lg:text-s5`,
s3:tw`text-s3 sm:text-s4 md:text-s5 lg:text-s6`,
s4:tw`text-s4 sm:text-s5 md:text-s6 lg:text-s7`,
s5:tw`text-s5 sm:text-s6 md:text-s7 lg:text-s8`,
s6:tw`text-s6 sm:text-s7 md:text-s8 lg:text-s9`,
s7:tw`text-s7 sm:text-s8 md:text-s9 lg:text-s10`,
s8:tw`text-s8 sm:text-s9 md:text-s10 lg:text-s11`,
s9:tw`text-s9 sm:text-s10 md:text-s11 lg:text-s12`,
}
使い方は例えばh1のフォントサイズを適用するためには
import {EmotionFonts} from '../component/EmotionsComponent'
const Testh1-style styled.h1`
${EmotionFonts.s6}`,
return(
<Testh1-style>H1のフォントサイズ</Testh1-style>
)
このように指定するだけで、特定のメディアクエリーでフォントサイズが変更するようになります。
実践的なテクニックという記事で前にも紹介したことがありますが、次のようにまとめたりもします。
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>)
他に疑似クラスや、条件付きクラス、複数のクラスの記入方法も書いてあるためご参考ください。
tailwindとemotionを使って行くと、次のように二通りの記述方法があります。
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>)
どちらを使うかは自由なのですが、後になってstyleで作ったのかcssで作ったのか忘れてしまう問題があり、
またsytledコンポーネントと、reactの通常のjsxのコンポーネントとの区別ができない場合があります。
そのため、classの場合とstyledの場合は命名の最後に分かりやすく名前を付けます。
import { css } from '@emotion/css';
import styled from '@emotion/styled';
const Democolor_css = css`color : #00f `
const Democolor_styled = styled.p`color:#00f`
//省略...
return (
<div>
<p className={Democolor_css}>EmotionCSSbluetext</p>
<Democolor_styled>EmotionStyled</Democolor-styled>
</div>)
//ちなみに「-」ハイフンは使えません
//例)const Democolor-css = css`color : #00f `
条件付きは三項演算子を使って2パターン変化で記述すればいいのですが、複数のパターンがある場合。次のように記述することができます。
おすすめはしませんが...
const Testtag =({tag})=> {
let padding = 0;
switch(tag){
case "h1" :
padding = 0;
break;
case "h2" :
padding = 17;
break;
case "h3" :
padding = 34;
break;
default :
padding = 49;
}
return (css`${tw`cursor-pointer hover:text-b3 hover:underline leading-none`} ${EmotionFonts.s1}
padding-left:${padding}px;
`)
};
return(
<>
<p className={Testtag({tag.value})}>test</p>
</>)
1年間tailwindとemotionを使ってみた感想です。
私個人としては共通項目のコンポーネント化ができる事と、tailwindを使って記述量が減った事により、管理が楽になり、とても満足しています。
簡単に、尚且つ自由修正ができ、管理し易い環境はこのtailwind+emotionの方法だと思っています。
正直片方だけを導入するのはかえって大変な作業になる気がします。両方を使うことによってとても管理しやすい環境を構築することができていると思います。
導入することも開発環境や、フレームワークの互換性とか、それぞれ導入に癖があり、マイナスな面もあり良いことばかりではありませんが、私個人としてはかなり押しています。
tailwindとemotionを導入を考えられている方に参考になれば幸いです。
繰り返しになりますが、記述方法は実践的なテクニックをご参考ください。
質問や、間違いがありましたら、お気軽にどうぞ
※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください
