🥺

tailwindcssからUnoCSSに乗り換えてみた

2022/02/25に公開

Tailwind CSS

UnoCSS

iconify

tech

環境

vite: 2.7.2
tailwindcss: 3.0.18
unocss: 0.26.2

Attributify Mode

@unocss/preset-attributify
tailwindcss使っていると長くなりがちなのクラスを属性に分けて記述できる
（メインはクラスに書きつつ、一部だけ属性に書いたりとかでも良い）

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Icons in Pure CSS

@unocss/preset-icons

Iconifyから好きなアイコン選んで、アイコン名をclassに指定するだけでアイコンが表示されてしまう。

もともとコンポーネントとアイコンデータをインポートして使用していたのが、

<script setup>
import { Icon } from "@iconify/vue";
import visualStudioCode from "@iconify-icons/logos/visual-studio-code";
</script>

<template>
<Icon :icon="visualStudioCode" />
</template>

クラスを指定するだけでいいのでものすごく快適になった。

<i class="i-logos:visual-studio-code"></i>
<i class="i-logos:typescript-icon"></i>
<i class="i-logos:vitejs"></i>
<i class="i-logos:vue"></i>
<i class="i-logos:tailwindcss-icon"></i>
<i class="i-logos:prettier"></i>
<i class="i-logos:eslint"></i>
<i class="i-logos:stylelint"></i>

（例は i- プレフィックスをコンフィグファイルで設定している）

ハマったところ

コード量も少なかったのと基本的にはtailwindcssのクラスはそのまま使用できるのであちこち修正する必要はなかったが、いくつかtailwindcssと異なる箇所があって対応が必要だった

@applyが効かない

CSS Directivesで @apply を有効化したはずなのに効かないとおもって触っていると、
どうやらcssファイルから @import したファイル内の @apply が効いていない模様。

コンフィグファイルの include でcssを追加してみても効かなかったので、それぞれJSファイルから直接インポートするようにした。

before:(after:)バリアントが効かない

tailwindcssではbefore:(after:)を指定すると一緒についてくる content:"" がつかないので、 before:content-none をつける必要がある。
（tailwindcssだと content-none は content: none になるのでここも異なる）

全部の箇所に追加するのは面倒なのでcssで対応した。

[class*="before:"]::before {
  content: "";
}

[class*="after:"]::after {
  content: "";
}

その他

他にも theme の colors のネストが深いものが使えなかったり、 fontSize の第二引数にオブジェクトが渡せなかったりはあるものの、書き方は違えどtailwindcssのテーマやプラグインで拡張していたものも全て再現できた。

使ってみた感想

属性を書くのが面倒くさい

もともと Attributify Mode の見やすさが良くて使ってみたものの、数箇所書き換えてみて属性をいちいち書くのが面倒臭いと感じた。
クラス属性にツラツラと書いていけばよかっただけのものが、クォーテーションを閉じたり開いたりしないといけなくなるのは面倒だった。

インテリセンスが効かない

VSCode用のエクステンションはあるものの、インテリセンス機能はない模様。
tailwindcssのエクステンションのインテリセンスでも大体まかなえるが、カスタマイズ分も効かせようとするとtailwindcssコンフィグも一緒に更新していかないといけない。

presetIcon最高！！！！！

これはかなり良いと思った。
事前にインストールだけしておけば、あとはIconifyから目当てのアイコンを探して、クラスにアイコン名をそのまま指定するだけでいい。
これは本当に最高だった。

まとめ

ということで、「tailwindcssからUnoCSSに乗り換えてみた」というタイトルで書いたものの実際のところ、全部乗り換えたわけではない。

Attributify Modeを使わないのであれば、tailwindcssのほうが慣れている分使いやすいと判断したので、今回はunocssではpresetIconだけを使用し、他は元通りtailwindcssを使うことにした。