📝TailwindCSS備忘録
公開
TailwindCSSとは
ユーティリティクラスの詰め合わせのライブラリ。多分 Hugo のテーマのテンプレートが使ってた。
ユーティリティクラスとは
1つのクラスに1つの css みたいな？CSS の機能がそのまま名前になる。
書き方
display: flex; にしたかったら flex というクラスを書く。こんな感じで書いていくらしい。
レスポンシブ対応
TailwindCSS は基本モバイルファースト。デフォルトで指定したスタイルがモバイル画面のスタイルになる。タブレットやPCに対応させる場合は sm や lg を追加する。以下のような感じで。
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"></div>
フッターを固定する方法
body に flex flex-col min-h-screen を設定し、main に flex-grow を設定する。
ref: 📝Tailwind CSSでフッターを固定する方法
Google Fonts を設定する
import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) <body className={`${inter.className} flex flex-col min-h-screen`}>
固定値を使いたい
こんな感じでOK。
<div class="w-[762px]"></div>
Googleフォントを複数読み込んで優先順位つけて適用したい
以下を参考に。
ref: 📝Next.js 13×Tailwind @next/fontでGoogleFontsやローカルフォントを高速化してみる
画像の上に文字乗せるやつ
<div className='relative'> <img className='w-full' src="" alt="" /> <h1 className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">text</h1> </div>