Zenn
🐬

UnoCSSが快適すぎる件

2023/08/11に公開
React
TypeScript
Tailwind CSS
Vite
UnoCSS
tech

■結論

■対象

  • Tailwind CSS 大好き！な方
  • UnoCSS？なにそれ？おいしいの？な方
  • UnoCSS をとにかく手軽に使ってみたい方

■UnoCSS イチオシポイント

① まんま Tailwind CSS (+ α)

UnoCSS 自体は、 Tailwind CSS や Bootstrap といった CSS フレームワークのスーパーセット的な立ち位置です。実際、それら CSS フレームワークを「拡張」した形のクラスがプリセットとして提供されています。

以下は Tailwind CSS として使用した例です。

<h1 class='text-xl font-bold mt-13'>Hello, UnoCSS!</h1>

一見、普段の Tailwind CSS と違いはありませんね。では、mt-13はどうでしょう？

…こんな気持ち悪い数字、 Tailwind CSS にはありませんね。しかし、 UnoCSS ではmt-13っぽい余白をちゃんとつくってくれます。(mt-13 っぽいというのは、 Tailwind CSS に実在する mt-12 と mt-14 の間の値である、ということです。)

Tailwind CSS ではマージンは 96 が最高ですが、 UnoCSS はスーパーセットの名にふさわしく、任意の値を入れることができます。たとえば、 mt-31415 なんかも勝手に作り出すことができます。

② アイコンがCSSとして使える

この機能が最強(当社比)です。例を見てみましょう。

<button className='i-mdi-send text-blue-500' />

これが、こうなります。

UnoCSS では様々な種類のアイコンのプリセットが用意されており、上記は Material Design Icons を使用した例です。
これを使えば、 SVG を大量にダウンロードしてペタペタ貼る生活とはおさらばできますね！

■UnoCSS の始め方

公式が丁寧なのでそれに沿って始められます。
筆者は Vite + React が良かったので、こちらの手順を書いていきます。
(ところどころ公式のドキュメントにお任せし、詰まりやすい部分を抜粋して書いています。)

① Vite + React のセットアップ

Vite 公式がわかりやすいので、こちらに沿ってインストールしてください。
筆者は yarn、TypeScript で進めていきます。

② UnoCSS のインストール

次に、 UnoCSS 自体のインストールを行っていきます。こちらは UnoCSS 公式を見て進めてください。
ただし、①でできたファイルは余分なものがくっつきすぎているので、 main.tsx と App.tsx は以下のようにきれいにお掃除しましょう。

main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'virtual:uno.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
App.tsx
function App() {
  return <h1 className='font-bold bg-blue-50'>Hello, UnoCSS!</h1>
}

export default App

一旦 yarn dev で画面を確認してみましょう。
すると余分なマージンなどが気になると思うので、ここでリセット CSS を当てることにしましょう。
main.tsx に import '@unocss/reset/tailwind.css' を追加してください。きれいに表示されたでしょうか。

main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import '@unocss/reset/tailwind.css'
import 'virtual:uno.css'

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

③ アイコンのインストール

最後にアイコンのプリセットをインストールします。
今回は Material Design Icons を例として使いたいので、以下のようにコマンドを実行します。

yarn add -D @unocss/preset-icons @iconify-json/mdi

次に、 uno.config.ts を編集します。
公式のドキュメントを見ると presetIcons() だけで良さそうですが、 presetUno() もセットで書かないと CSS のプリセットが上書きされ、スタイルが消滅してしまいます。

uno.config.ts
import { defineConfig, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetIcons()],
})

では、ついにアイコンを使ってみましょう。以下のように App.tsx を編集してみて下さい。

App.tsx
function App() {
  return (
    <h1 className='font-bold'>
      Hello, UnoCSS
      <i className='i-mdi-heart inline-block text-pink-500' />
    </h1>
  )
}

export default App

以下のようになったら成功です。お疲れさまでした！

【おまけ】 VSCode の設定

ここまでで十分に便利ですが、 CSS の補完が効かないとかなり辛いです。
VSCode ユーザーの方は、ぜひこちらの拡張機能をインストールしてください。

■まとめ

  • UnoCSS は Tailwind CSS みたいな感覚で使える
  • アイコンがクラスとして使えて超快適

■使った資料

Discussion