TailwindCSSでレスポンシブな実装をやってみる

CSS

今回はtailwindCSSを使用してレスポンシブなレイアウトやstyleの実装をやってみます
もりけん先生のブログを参考にして進めています。

【明日から使える!】tailwindCSSの使い方。初学者の為ハンズオン。viteで。 | 武骨日記
この「【明日から使える!】tailwindCSSの使い方。初学者の為ハンズオン。viteで。」記事はtailwindcssを今から触る方向けです。 つまり私もです。 index 1. tailwindCSSの思想。ユーティリティCSSに至る考えが分かる資料 2. tailwindCSSを使うためにvite環境を構築 3...

環境

vite 3.0.0
tailwindcss 3.1.6

ブレイクポイント

デフォルトで用意されているブレイクポイントがあり、それらを使用して実装することができる

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

上でキーとなっている名称を頭につけ使用する

<button class="md:bg-slate-300">ボタン</button>
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.

独自のブレイクポイントを作成する

tailwind.config.cjsに以下のように指定する

module.exports = {
  content: ["./index.html"],
  theme: {
    screens: {
      sp: "350px",
      pc: "1200px",
    },
  },
  plugins: [],
};

先ほど設定したキーを使用し、クラスをあてることで実装できる

<button class="pc:bg-slate-300">ボタン</button>

デフォルトのブレイクポイントを修正・追加する

extendの中にscreensを書くことで、デフォルトの設定を継承しつつ
screensで指定したブレイクポイントを新たに追加、または上書きできる

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {
      screens: {
        xs: "200px",  // 上書き
        sm: "375px",   // 上書き
        xxx: "1600px",  // 新たに追加
      },
    },
  },
  plugins: [],
};

【おまけ】tailwind.config.cjsのcontentについて

設定のカスタマイズを定義するファイル

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};
Configuration - Tailwind CSS
A guide to configuring and customizing your Tailwind installation.

content

tailwindCSSを使用するファイルのパスを設定する
以下のようにすることでindex.htmlとmain.jsでtailwindCSSを使用することができる
またパスはプロジェクトのルートからの相対パスを指定する

module.exports = {
  content: ["./index.html", "./main.js"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Content Configuration - Tailwind CSS
Configuring the content sources for your project.

【おまけ】resetcssはいらないの?

これまではreset.cssを読み込んだあとstyle.cssを読み込み実装を行なっていたが
tailwindCSSの場合はどうなるのか…?

style.cssで@tailwind baseを読み込むことで解決している

@tailwind base; // here
@tailwind components;
@tailwind utilities;
Preflight - Tailwind CSS
An opinionated set of base styles for Tailwind projects.

まとめ

今回はブレイクポイントについてをメインに、調べる過程で疑問に思った箇所もおまけとして残しました。
勉強会を機にtailwindCSSに触れ、その便利さに既に心を奪われました…
まだ見慣れなさもあるのですが、クラス名の悩みからは解放されそうです。
今後もtailwindCSSを触りつつ、また学んだことはブログで更新していこうと思います。


コメント

タイトルとURLをコピーしました