WSL2を使ってtailwind cssをやってみよう！

2023年8月13日 20:34

tailwind cssとは何ぞやみたいな感じだけど、まあ多分これに関しては「何となく使わざるを得なくなっちゃった」みたいな人の方が現状多いような多くないような気がする。まあ、何にしても「どういうものか」を把握しておくだけでも割と人生経験的には(この業界で飯を食うなら)プラスになるだろうから、そういう意味でもある程度触っておいていいものかもしれない。

インストールする

最初に断わっておくけど、windows + wsl2の環境を想定している(タイトルにもあるように)。ただ、他のunix系環境でもnpmが動けばまあ何とかなるんじゃねえかという気はする。

これを見ると

Tailwind CLI
Using PostCSS
Framework Guides
Play CDN

そもそもtailwind cssとはどういう動きをするのかというと、たとえば以下のようなhtmlがあったとすると

<p class="m-3">test</p>

この m-3 というクラスはtailwind cssに含まれるため、このclass「だけ」検知してそれ用のcssを掃き出すという動作をする。(そうすれば理論上確かにcssの量はコンパクトになるよねっていう)。
したがって、CDNでもいいんだけど、tailwind cssを学びたいという場合、この最適化されたビルドを体験できないので不適切であると思う。

npmとかnpxとか

今WSL2がセットアップされているとして、WSL2のubuntu的な環境にこれを導入するか、あるいはdockerでやるかは悩める所かもしれないが、まあせっかくWSL2があるならnpmとかそういうのくらいはもう入れちゃってもいいんじゃない？って気がする。ただ、その場合もaptで入れると古いのが入るので、以下のようにしよう。

% curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
% sudo apt install -y nodejs  
% npm --version                                         
9.6.7

現状のnpm ltsは9.6.7というものが入った。まあltsを指定しておけば大抵大丈夫なんじゃないかなという。

ディレクトリ構造

とりあえずひとつdirを切る。

% mkdir tailwind 
% cd tailwind

インストールドキュメントに従えば

npm install -D tailwindcss
npx tailwindcss init

となる。-Dは--save-devと同じだ。すると

    node_modules/
    package-lock.json
    package.json
    tailwind.config.js

が出てくる。
(.gitで管理するならnode_modules は除くように.gitignoreに書いておこう。)

tailwind.config.js の設定

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

これはオフィシャルドキュメントの設定だが、要するにhtmlをどこに配置するかという事でもある。src/index.html みたいにするならこれでもいい。public/ 以下とかにしたいならちょっと考えないといけない。いずれにせよ、この設定のまま行くとして、ここはsrc/の中にhtmlを入れる事にしよう。

src/input.css

これはtailwindのインポート機能を書くcssであり、まぎらわしいのだが、index.htmlから呼びこむcssではない。
(そいう意味ではsrcの中にこれが入ってるのはちょっとヘンなのでsrcとpublicで分けるというのもありだと思うんだけど)
ただまあ繰り返すがい、とりあえず今回はsrcの中にinput.cssとindex.htmlを入っているので、input.cssを取り込まないようにする事。

src/input.css

src/input.cssは以下のように書いた

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

そしてsrc/index.htmlにサンプルのtailwind cssを使ったやつ書く(といっても単純にhtmlである)

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
  </head>
  <body class="bg-blue-500 text-white">
    <h1 class="text-2xl">This is a test</h1>
  </body>
</html>

このように bg-blue-500 text-white とか見慣れないclassがtailwind cssのclassである。

ビルド

さて、この状態で

npx tailwindcss -i ./src/input.css -o ./dist/output.css

してみよう

% npx tailwindcss -i ./src/input.css -o ./dist/output.css  

Rebuilding...

Done in 945ms.

するとこのようにビルドされ dist/output.css が生成された。

(ちなみにだが、gitを使ってる場合通常distはコミットしないから.gitignoreに書くのが定石である)

htmlの修正

src/index.htmlが今cssを読みこむようになっていないよね、だからそれを修正する。

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="../dist/output.css">
  </head>
  <body class="bg-blue-500 text-white">
    <h1 class="text-2xl">This is a test</h1>
  </body>
</html>

要するに、 <link rel="stylesheet" href="../dist/output.css"> これを指定した。

そうすると

こんな感じになるだろう。まあ何となく背景色が青めでテキストが白くて…というのがclassでわかるようになっているのが特徴のようだ。

テスト開発環境の用意

まず、vscodeのWSL連携機能を使ってWSLで作業している事を伝えよう。

これでtailwind/のフォルダーを開く。ファイルでなく。ここでLive serverというのを使う。拡張でインストールしてなければインストールしてね。

そしてLive serverを起動する。

http://localhost:5500/src/ とかを開いて、エディタで適当に文字を編集し、その文字がリアルタイムに反映される事を確認する。

cssクラス自体の編集

さて、ここで

    <h1 class="text-2xl">This is a test</h1>
    <h2 class="m-3">This is a test2</h2>

などを生やしても即時反映されないだろう。それは何故かというと

この m-3 というクラスはtailwind cssに含まれるため、このclass「だけ」検知してそれ用のcssを掃き出すという動作をする

冒頭で書いたやつ

と冒頭の方に書いたが、要するにhtmlに書いてあるclass名からビルドをして必要なclassを取り込んでいかないと動作しないのである。従って以下のようにコンソールでコマンドを待機させておく。

% npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Rebuilding...

Done in 679ms.

この状態で

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="../dist/output.css">
  </head>
  <body class="bg-blue-500 text-white">
    <h1 class="text-2xl">This is a test</h1>
    <h2 class="m-3 border">This is a test2</h2>
  </body>
</html>

みたいに、どんどん書き換えていくとLive serverでhtmlがリアルタイムで動作すると同時に、コンソールがRebuildを続けてくれる。

(おまけ) vscodeのビルドタスク

これだけで一応使えるんだけど、vscodeを使う場合ターミナルを供えるから、そこで

 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

を入力していてもいい。んだけど、

以下のようにビルドタスクの実行ができると便利かもしれない。

タスクがないので以下のようにしてテンプレート的なものを作ってもらう

上記のようにテンプレートのjsonが出来て編集可能になるので、

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch tailwindcss",
      "type": "shell",
      "command": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ],
  "group": { // このタスクが属するグループに関する設定。
    "kind": "build", // グループの種類。"build"はビルドタスクを意味します。
    "isDefault": true // このタスクがデフォルトのビルドタスクであるかどうか。
  }
}

こんなようなファイルを保存しておいて、実行すれば、ビルドタスクに「watch tailwindcss」ってのが出てくる。

みたいに画面の下で一生懸命動いてくれるので、新たにターミナルを立ち上げる必要がないのはいいかもしれない。

以上まとめ

ここまでで、とりあえずtailwind cssをいじくり回せる環境が出来た。何やらわけわかんねえ感じがあるけど最初はそんなもんである。次回はtailwind cssを使ってもうちょっとモダンなHTMLを書いてい、く、か？

この記事が気に入ったらサポートをしてみませんか？