Tailwindcss+Postcssのユーティリティーファーストで爆速CSSコーディング

2021年12月10日にTailwindcss Ver.3.0がリリースされました。
最近よく耳にするようになりましたが、なぜTailwindcssって流行っているのでしょう？

この記事ではTailwindcssのUtility First(ユーティリティファースト)の概念から、実際に使えるようになるところまで解説します！

執筆者

これまで情報アーキテクチャ+CSS設計、Bootstrapのマルチクラス、BEMのシングルクラスで、Sass/CSSをゴリゴリに書いてきたフロントエンドの筆者が実際に使ってみて感じたメリットをまとめてみたいと思います。

Utility First(ユーティリティファースト)

CSS設計とは、CSSのメンテナンス性や作業の効率化のためのHTMLクラス名の規則と、CSSのコードの管理方法の考え方です。

これまでOOCSS, BEM, SMACSSなど様々なCSS設計のアプローチがありましたが、CSSはグローバルスコープのため破綻を起こしやすい言語でした。しかし、Utility FIrstの考えが台頭してくると、その全てが解決されたように思います。

これまでBEMでのヘッダーのグローバルナビは、

class="header-nav__item--active"

といった情報設計における厳格なクラス名が付与されて、CSSプロパティを専用に記述していました。しかし、Utility FIrstでは、

class=".p-6 .bg-white .rounded-xl .flex .items-center"

といった予め用意されているutility classを読み込むだけです。

これにより、3つメリットがあります。

1. CSS設計・運用コストの低減

You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
class 名の発明に無駄なエネルギーを使わなくて済む。何かをスタイリングするためだけに sidebar-inner-wrapper のようなばかげたクラス名を追加したり、単なるフレックスコンテナに対して抽象化した名前を悩んだりすることがなくなる。

CSS設計の経験のある人は誰しも悩んだことがあると思いますがCSS classの命名は本当に難しい作業です。UIコンポーネント構造を抽象化してclass名として表現しなくてはなりません。それに加え、ネーミングルールの設計、ネーミングルールの遵守徹底など、非常にリソースが奪われコストのかかる作業でもあります。

Utility First アプローチをとることによって、そもそもclass名の命名という作業自体がなくなります。つまり、それに関わる設計・運用コストもなくなり、随分と効率が良くなります。

2. 100%再利用でCSSサイズ抑止

Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
CSS の肥大化を止めることができる。従来のアプローチを使用すると、新しい機能を追加するたびにCSSファイルが大きくなる。utility を使用すると、すべてが再利用可能になるため、新しいCSSを作成する必要はほとんどない。

tailwindcss が提供する utility class は、CSSプロパティ1つ1つに対して用意されるほど細かいので（primitive utilities とも呼ばれる）、100%再利用可能です。ほとんどの場面においてはすでに用意されているutilityだけで十分で、開発者が新たに独自にCSSを記述場面がほとんどない、ということです。

3. スタイル変更がHTMLローカルで可能

Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.
変更が安全になる。 CSSはグローバルであり、変更を加えたときに何を壊しているのかが分からない。 HTMLの class はローカルであるため、他の何かが壊れることを心配せずに class を変更できる。

utility class はprimitiveなので、class内のCSSを変更するということはありません（もちろん変更することは可能で、その場合はconfigファイルからJavaScriptで記述します）。もしスタイルを変えたくなった場合は、CSSを変えるのではなく、HTMLのclass属性に付与しているCSS class自体を変えることになり、HTMLの変更は影響範囲が限定されます。よくCSSはグローバル変数だと揶揄されますが、それとの対比で「HTMLのclassはローカル」とは非常に納得できます。

それでは、早速Tailwindcssを使っていきましょう！

Tailwind+Postcssのインストール

オフィシャルサイト
https://tailwindcss.com/docs/installation/using-postcss

まずは作業用のフォルダを作成し、そのフォルダに移動します。ここでは書類フォルダの配下にtaillwindcssというフォルダを作ります。

$ cd tailwindcss

作業用フォルダのnpm初期化処理して、package.jsonを生成します。

$ npm init -y

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

作業用フォルダにpackage.jsonが生成されたのを確認したら、TaillwindcssとPostcssと一緒に便利なプラグインAutoprefixerをインストールします。

$ npm install -D tailwindcss@latest postcss-cli@latest autoprefixer@latest

added 125 packages, and audited 126 packages in 12s

26 packages are looking for funding
  run `npm fund` for details

npm listしてインストールされているか確認して観ましょう。

$ npm list

tailwindcss@1.0.0 /Users/○○○/Documents/tailwindcss
├── autoprefixer@10.4.2
├── postcss-cli@9.1.0
└── tailwindcss@3.0.15

無事、TaillwindcssとPostcss、Autoprefixerがインストールできたことが確認できました。

続いて、インストールしたTaillwindcssを実行します。

$ npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

実行すると、tailwind.config.jsが生成されました。ここにフォントサイズやカラーコードなど、Javascriptで書いていきます。Sass(SASS/SCSS)でいうところの@mixinとか$変数のイメージです。CSSのビルドは一緒にインストールしたPostcssが活躍してくれます。

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

作業フォルダの中にpostcss.config.jsを新規作成し、下記を記述してtailwindcssとautoprefixerをプラグインとして使用できるようにします。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

src/style.cssを作成し、@tailwindを使って、Tailwindcssの呼び出しを行います。

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

src/index.htmlにHTMLを記述していきます。スタイルシートからクラスを当てていきます。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

package.jsonにscriptsを追加します。scriptsセクションがない場合は、新たに作成します。

"scripts": {
  "dev": "postcss src/style.css -o dist/style.css"
}

$npm run dev

で、Postcss使ってTailwindcssを使ったCSSをビルドすることができました。