ローカル環境でシンプルにtailwindcssのみを構築する

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でのインストール

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

% npm init

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

% npm install tailwindcss --save-dev

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

公式サイト
tailwindcssをインストール

style.cssにtailwindのスタイルをひっぱる準備

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

style.css

@tailwind base;

@tailwind components;

@tailwind utilities;

公式サイト
tailwindcssの呼び出し

cssを書き出す（ビルドする）

% 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のリストなどは公式サイトから。

tailwindcss FontSize

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

ちなみに

% npx tailwindcss help build

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

CDNでも可能、だけど

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

index.html

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

ただし

• デフォルトテーマのカスタマイズはできない
• @apply @variantsは利用できない
• Group-hoverを利用することはできない
• サードパーティのプラグインのインストールはできない

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

まとめ

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

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