tailwindcssとは

css設計などがまだなかった時代によく使われていた手法を使ったフレームワーク。

mb-10 {
margin-bottom: 10px;
}

こういう指定をpx数ごとに設計しておいて、HTMLでclassを付与するだけで必要な箇所に必要な時だけ指定できたもの。

いわゆるUtility FirstなCSS。
公式サイトは以下から。
tailwindcss

プロジェクトフォルダを作成

なんでも良いんですが、とりあえず作業フォルダを作成しましょう。

- tailwind/
    - assets/
        - css/
            - style.css
    - index.html

最低限必要なのは、index.htmlとstyle.css

前提として、Node.jsが入っている想定。

% npm init

これでpackage.jsonが作成される。
インストールには、npm使います。yarnでもいけるみたい。

% npm install tailwindcss --save-dev

--save-dev使用でpackage.jsonのdevDependenciesに保存

以下のようにstyle.cssに記述する

style.css

@tailwind base;

@tailwind components;

@tailwind utilities;

% npx tailwindcss build assets/css/style.css -o assets/css/output.css

package.jsonに書くのなら

package.json

"scripts": {
    "build": "npx tailwindcss build assets/css/style.css -o assets/css/output.css"
  }

その上で

% npm run build

そうすると、style.cssと同じ階層にoutput.cssが作成される。

あとは、HTMLで好きなようにclassを付与していくだけでスタイルが適用してく。
classのリストなどは公式サイトから。

要素ごとにページが分かれているのでリンク貼るにも膨大になります。
とりあえずFontSizeのURL貼っておこうかと。

% npx tailwindcss help build

buildする際のコマンドヘルプはこれで確認。

tailwindcssではCDNからの利用も可能になっています。

index.html

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

ただし

と、いろいろと制約がついてしまうので、わかるのならnpmやyarnから利用するのが良いかも。

公式サイトみながらインストールしてたんですけど、使いはじめるまでよくわからないことが多かったのでメモに残しておこうと思った次第。

誰かが同じように悩んでいるならぜひ活用してもらえればと思います。