Tailwind CSS 独自のプロパティ名覚えるの大変だな → Master CSS にしようかな

この記事の概要

Tailwind CSS、便利ではありますがときどきプロパティ名が分からなくなりませんか？

• font-sizeがtext-から始まるのに対してfont-weightがfont-から始まる
• jutify-はすべてjustify-から始まるのに対しalign-はcontent-とitems-とself-と分かれている
• place-contentやplace-itemsはplace-items-centerなど、何の略称もない

ルールがあるような、無いような。

「CSS だとこう書くのは分かってるんだけど……」と迷ってしまうこともあります。

それを解消してくれるかもしれないのが Master CSS です。

環境

大抵のフレームワークで使えますが、1 番ポピュラーなので React で説明します。

主要なものだけ記載します。

依存関係	バージョン
react	18.3.1
typescript	5.2.2
vite	5.3.1
@master/css	1.37.8

インストール

Vite で環境を作ります。

npm create vite@latest

今回は他の依存関係は必要ありません。

npm install @master/css

src/main.tsxのようなファイルに適用すれば OK です。

src/main.tsx

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.tsx'
  import './index.css'
+ import '@master/css'

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )

スタイルの適用

  import { useState } from 'react'
  import reactLogo from './assets/react.svg'
  import viteLogo from '/vite.svg'
  import './App.css'

  function App() {
    const [count, setCount] = useState(0)

    return (
      <>
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://react.dev" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
        </div>
-       <h1>Vite + React</h1>       
+       <h1 className="font-size:50px font-weight:weight font-style:italic margin:50px text-align:center">Vite + React</h1>
        <div className="card">
          <button onClick={() => setCount((count) => count + 1)}>
            count is {count}
          </button>
          <p>
            Edit <code>src/App.tsx</code> and save to test HMR
          </p>
        </div>
        <p className="read-the-docs">
          Click on the Vite and React logos to learn more
        </p>
      </>
    )
  }

  export default App

font-size:50pxのように、一般的な CSS の書き方から;をなくすだけでスタイルを組めます。

もちろんpx以外でもremやemなど好きな値を使えます。

容量

Master CSS は省略記法を使えて、その方がコードの容量は少なくなります。

クラスの指定に使った文字数は minify などされず、そのまま適用されるからです。

とは言え、一般的な範囲で言えば問題無い程度だと判断しています。

省略記法を使って覚えづらくなったり、チーム内で記法が揺れるくらいなら、完全な状態で書くのもアリだと思います。