Chapter 01

tailwindcss 事始め

knaka Tech-Blog
knaka Tech-Blog
2021.04.30に更新

概要:

このBookは、
最近CSSフレームワークで、utility-first などど言われるtailwindcss

の記事を見かけたので。調査した内容をまとめました。

初心者向けなので、軽めの内容となっております。


関連

https://tailwindcss.com/

環境

  • tailwindcss: 2.1.2

参考のコードHTML

  • 作成した tailwindcss サンプルhtml

https://github.com/kuc-arc-f/tailwind-sample

使用した感想

  • 少し使った感想を下記となります。

ぼんやりした表現ですが、bootstrap と、CSSベタ書きの中間くらいの フレームワークの位置かと思いました。

bootstrapに慣れている人で、tailwindcssに移行する場合。クラスの多さで挫折する場合も。あるかと思いました

(使用者によるかと思います)

■ デメリット

  • クラスを多く書く場合があり、 bootstrapと比較するとコード量が多くなりやすい

  • bootstrapのように、1つの部品クラスを指定するだけで。CSS適用されない事が多い

■ 利点

  • 拡張性が高く、細かい調整がしやすい

導入

  • インストール関連

https://tailwindcss.com/docs/installation

https://github.com/tailwindlabs/tailwindcss-from-zero-to-production/tree/main/01-setting-up-tailwindcss

  • 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する

https://zenn.dev/knaka0209/articles/5eb58a8a0de257

....