TailwindCSSに入門してみた

ずっとBulmaというかBuefyを使っていたけど、
Bulmaとnuxt/content(の中のPrismJS)の相性が悪い。。
・BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い - Crieit

今はがんばっているけど、がんばらないでいいように、別のCSSフレームワークを検討中。
Tailwind CSSがいいとよく聞くので、試してみたときの備忘録。

Tailwindとは

utility-firstなCSSフレームワークで、便利なCSSがたくさん用意されている。
用意されたユーティリティをclassに指定していくことで、画面をデザインできる。

CSSを書かないため、競合しないようにクラス名を考えなくて良くなったりする。

ただ、ユーティリティしか提供されないため、
ヘッダー/フッターのようなコンポーネントから作成する必要がある。

便利なサイト集

BuefyのようなUIコンポーネントを提供しているライブラリから移ると、
基本的なコンポーネントの書き方に悩むし、用意されているユーティリティも多いので、
よく使いそうなサイトをいろいろ調べてみた。

• 本家
  • v3: Tailwind CSS
  • v2: Tailwind CSS
• テンプレート集/コンポーネント例
  • Tailwind UI - Official Tailwind CSS Components (公式)
  • Tailblocks — Ready-to-use Tailwind CSS blocks
  • Tailwind UI KIT – Components section for React, VueJS and Angular.
  • Tailwind CSS Components. Examples and templates
  • VueJS + TailwindCSS = A match made in heaven - VueTailwind
• コンポーネントライブラリ
  • daisyUI ... Tailwindのプラグイン
  • Vue-Tailwind ... Vueコンポーネントライブラリ
• チートシート
  • Tailwind CSS Cheat Sheet
• Nuxtモジュール
  • @nuxt/tailwind ... (v4.2.1はTailwind 2.x系)

daisyUIをそのまま使っても良いし、クラスのまとめ方などを参考にしながら、
各種UIコンポーネントを用意していくのがよさそう。

出てきたクラス名をチートシートで調べつつ、カスタマイズしていく感じ。

提供されているCSS

カテゴリの一覧はこんな感じ。

• LAYOUT ... Container/Display/Object Fit/Position/Z-Indexなど
• FLEXBOX AND GRID ... Flex/Grid/Gapなど
• SPACING ... Padding/Marginなど
• SIZING ... Width/Max-Widthなど
• TYPOGRAPHY ... Font/Text Align/Whitespaceなど
• BACKGROUNDS ... Background Color/Background Imageなど
• BORDERS ... Border/Divide/Ring関連
• EFFECT ... Box Sadow/Opacity/BlendModeなど
• FILTERS ... Filter/Blur/Backdrop Filterなど
• TABLES ... Border Collapse/Table Layoutなど
• TRANSITIONS AND ANIMATION ... Transition/Animation関連
• TRANSFORMS ... Transform/Rotate/Translateなど
• INTERACTIVITY ... Cursor/Outline/User Selectなど
• SVG ... Fill/Strokeなど
• ACCESSIBILITY ... Screen Readers

レスポンシブ関連や擬似クラス/疑似要素も用意されている。

sm:   @media (min-width: 640px) { ... }  
md:   @media (min-width: 768px) { ... } 
lg:   @media (min-width: 1024px) { ... }    
xl:   @media (min-width: 1280px) { ... }    
2xl:  @media (min-width: 1536px) { ... }

モバイルファーストなので、デスクトップ用の追加で指定していく感じなのかな。

Nuxtで使ってみる

@nuxt/tailwindが用意されているので、それを使う。
npx create-nuxt-appでTailwind CSSを選択すればOK。

tailwind関連の設定は、tailwind.config.jsかnuxt.config.tsに書く感じ。

Just-In-Timeモードを使う場合はこんな感じ。

export default {
  // ...
  // Tailwind CSS module configuration: https://tailwindcss.nuxtjs.org/tailwind/config
  tailwindcss: {
    config: {
      mode: "jit",
    },
  },
  // ...
}

あとは、npm run devで起動すれば、JITでTailwindが使えるようになる！

とりあえず、ここまで！ハローワールドはできた(´ω｀)

参考にしたサイトさま

• tailwind対応のVueのコンポーネントライブラリ - Qiita