概要:
このBookは、
最近CSSフレームワークで、utility-first などど言われるtailwindcss
の記事を見かけたので。調査した内容をまとめました。
初心者向けなので、軽めの内容となっております。
関連
環境
- tailwindcss: 2.1.2
参考のコードHTML
- 作成した tailwindcss サンプルhtml
使用した感想
- 少し使った感想を下記となります。
ぼんやりした表現ですが、bootstrap と、CSSベタ書きの中間くらいの フレームワークの位置かと思いました。
bootstrapに慣れている人で、tailwindcssに移行する場合。クラスの多さで挫折する場合も。あるかと思いました
(使用者によるかと思います)
■ デメリット
-
クラスを多く書く場合があり、 bootstrapと比較するとコード量が多くなりやすい
-
bootstrapのように、１つの部品クラスを指定するだけで。CSS適用されない事が多い
■ 利点
- 拡張性が高く、細かい調整がしやすい
導入
- インストール関連
https://tailwindcss.com/docs/installation
- 01: Setting Up Tailwind CSS – Tailwind CSS: From Zero to Production
https://www.youtube.com/watch?v=qYgogv4R8zg
- 簡単な利用方法 / CDN
下記CDNを、HTML等から読込む
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
- 上記関連の、installation等で tailwindcss.cssをコンパイルで生成できましたが、今回は、説明省略します。
参考の確認方法 (参考)
- viteを使う方法、
上記 git / 01-setting-up-tailwindcss を git cloneして。
npm install
npm run dev
ブラウザで localhost:3000 、でviteが起動しますので。レイアウト確認等が便利でした
参考のページ
tailwindcssで、@apply で短縮表記と purgeする
....