くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

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

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-appTailwind CSSを選択すればOK。

tailwind関連の設定は、tailwind.config.jsnuxt.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が使えるようになる!

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

参考にしたサイトさま