tailwindcss入門メモ

この記事の目的

tailwindを始めるにあたってのメモ

tailwindcssとは-utilityfirstとは-

bootstrapとかだとbtnクラスなどがあってcomponentに対してclassがあったりするがtailwindcssではcomponentに対してあるのではなくutilityを抽象化したものでできている。例えばpaddingをp-1としてpaddingを0.25remでいい感じにしてくれるなど。

htmlにかく、classの量は多くなってしまうがcssをそこまで書かずにclassをつけていけばcssをいろいろ調整してくれる。

導入

npmで落とす。上記でスムーズにできるはず

rails6での導入

「rails6+tailwindcss2の設定」
https://qiita.com/you8/items/f0306ed17f8990407988

layoutの考え方

基本

基本の考え方は下記

• containerで全体を内包
• 中をgrid（ https://tailwindcss.com/docs/grid-column ）で並べる。bootstrapと同じようにrowで内包し、要素を並べることもできる。
• もしPCなどでサイドバーを出す場合、layoutをこれ（ https://tailwindcss.com/docs/top-right-bottom-left ）で出し分ける

breakpoint

breakpointのdocuments
https://tailwindcss.com/docs/breakpoints/

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  }
}

gridでcardを並べたい場合

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-5 xl:col-span-2..."></div>
  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-1 xl:col-span-4..."></div>
  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-2..."></div>
  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-2 xl:col-span-4..."></div>
</div>

defaultのカラムをcol-spanで指定してこのサイズ以上の横幅の場合、カラムを変えたいというときはsmなどで指定。

カラムの横幅調整をしたい場合

  <div class="flex mb-4">
    <div class="w-1/2 p-2 bg-gray-400 text-center">.w-1/2</div>
    <div class="w-1/2 p-2 bg-gray-500 text-center">.w-1/2</div>
  </div>

上記のようにw-に分数をくっつけて横幅を指定する。そのdivをさらにflexのdivで囲む。