TailwindCSSのTipsをまとめてみた

TailwindCSS 2022.04.26

ブログメインビジュアル

こんにちは。
今回は前回から引き続きTailwindCSSについて紹介したいと思います。
内容としては、TailwindCSSを使用してみて詰まった点や便利な機能をTipsとしてまとめました。
4点紹介するのでぜひ参考になればと思います！

バージョン

tailwindcss：3.0.18
react：17.0.2

1.configファイルのテーマ設定について

まずはconfigファイルのテーマ設定について紹介します！
公式サイトにも記載がありますが、TailwindCSSを使用するにあたりtailwind.config.jsのtheme内でカラーやフォントなどを定義して使用することができます。

 module.exports = {
   // 省略
   theme: {
     extend: {},
     colors: {
        'transparent': 'transparent',
        'current': 'currentColor',
        'black': '#1E293B',
        'white': '#fff',
     },
   },
   // 省略
 }

ここで注意ですが、上記のようにconfigのテーマ内でカラーを定義をするとTailwindCSS側でデフォルトで用意されているカラークラスが使用できなくなります。
例えば、TailwindCSS側で用意されているtext-yellow-300（#fde047）は使用できなくなります。
使用したい場合は以下のように'yellow': '#fde047'を定義に追加して使用するようにしましょう！

 module.exports = {
   // 省略
   theme: {
     extend: {},
     colors: {
        'transparent': 'transparent',
        'current': 'currentColor',
        'black': '#1E293B',
        'white': '#fff',
        'yellow': '#fde047', // 追加
     },
   },
   // 省略
 }

configファイルのテーマ設定を使用するときはあらかじめ使用する内容を洗い出して定義しておくように注意しましょう！

2.ベースクラスの適用

次にベースクラスの適用について紹介します！
例えば、bodyに対してベースのスタイルを当てたい場合があると思います。
以下のTailwindCSS読み込みファイル内で@layerを使用することでbodyに対してベーススタイルを当てることができます。

▼globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans text-black;
  }
}

*上記section（configファイルの設定について）で作成したconfigファイルを使用しています。

3.propsを用いたスタイルの条件分岐について

ReactやVueを用いた開発にTailwindCSSを導入する際、propsを用いてスタイルの条件分岐をさせたい時があるかと思います。

例えばLoadingコンポーネントでsizeによって、ローディングの大きさを変更したいときに以下のようなソースで試してみたのですがどうやらこの書き方だとうまくスタイルが読み込まれないようでした。

▼App

import Loading from '../atoms/Loading'

const App = () => {
  return <Loading size='40'/>
}

export default App

▼Loading

import React from 'react'

const Loading = ({size}) => {
  return (
    <div className='flex justify-center'>
      <div className={`${size ? `h-[${size}px] w-[${size}px]` : "h-[10px] w-[10px]"}`}></div>  // この書き方はNGでスタイルが読み込まれない
    </div>
  )
}

export default Loading

対策

対策方法ですが、以下のように事前に用意したクラスを当てるしかないみたいです。
ここもconfigと同じくあらかじめ使用するコンポーネントの種類まで洗い出しておくべきかなと思います。

▼App

import Loading from '../atoms/Loading'

const App = () => {
  return <Loading size='small'/>
}

export default App

▼Loading

import React from 'react'

const Loading = ({size}) => {

    const getSize = () => {
      switch (size) {
        case 'small':
          return 'h-10 w-10'
        case 'large':
          return 'h-20 w-20'
        default:
          return 'h-15 w-15'
      }
    }

  return (
    <div className='flex justify-center'>
      <div className={`animate-spin ${getSize()} border-4 border-primary rounded-full border-t-transparent`}></div>
    </div>
  )
}

export default Loading

4.可読性について

TailwindCSSでネックになるのはやはり可読性の部分かなと思います。
可動性が低くなってしまうのはしょうがない気がするのですが、やれることはやっていきたいですよね。

clsxの導入

クラス名を記述するにあたってclsxの導入をしてみます。
clsxとはclassnamesと似たようなライブラリなのですが、複数のクラス名をつけることができます。
こちらを使用することで関連性のあるクラス名を分けて記述することができます！

▼例：clsxを用いたLoadingコンポーネント

import React from 'react'
import clsx from 'clsx'

const Loading = ({size}) => {

    const getSize = () => {
      switch (size) {
        case 'small':
          return 'h-10 w-10'
        case 'large':
          return 'h-20 w-20'
        default:
          return 'h-15 w-15'
      }
    }

  return (
    <div className='flex justify-center'>
      <div
        className={clsx(
          `animate-spin`, // アニメーション
          `${getSize()}`, // 関数
          `border-4 border-primary rounded-full border-t-transparent` //その他のクラス
        )}
      ></div>
    </div>
  )
}

clsxを使うことで関連性のあるクラスを分割して書くことができるので、多少は見やすくなるのではないかと思います。今回は小さなコンポーネントなので効果が薄いですが大きくなると効果が実感できるかと思います。
ぜひ使用してみてください！！

参考：6 Tips for Tailwind CSS Development (with resources!)

まとめ

TailwindCSSの使い方はまだまだ慣れないですが、かなり可能性は感じてます。
今後、他にも便利な機能があればブログにしていきます。
最後までお読みいただきありがとうございます。

この記事を書いた人 kito エンジニアになるために愛知から上京しました。

TOP