Tailwind cssを使ってCSSファイルを使わずコーディング!

udemyとかyoutubeのコーディングの勉強をしていると、
海外の講師が使っていることをよく見るので今回サラッとまとめる。
といいつつ参考リンクの方が詳しいので、学んだよという記事。
Markdown記法の練習もしつつ。

Tailwind cssを使うメリット

サイト更新時などに起こりがちな

レイアウトが急にパターン増えたけど既存クラスをいじったら怖いからまるまるコピーして作り直す
top-container,service-container?どうする？クラス名決めに時間かかる
気づいたら同じスタイルを違うクラス名で書いてた

な感じできっちりCSS作りをしていたはずだけど
結果的に複雑になったり作った人じゃない人が担当になった時にCSSの仕組みを覚えるコストをなくすために作られたフレームワークです。

主なメリットはこちら

HTMLにクラスをつけていくだけでCSSファイルは導入時以外基本的にはつかわない
ホバーやフォーカス・アニメーションもちろん、レスポンシブ対応もクラス内記述で対応できる
reactやvueなどにも導入が簡単にできる

Tailwind cssの基礎的な記述方法

学習コストは多少かかるけどもCSSをある程度理解している人ならわかるような感じなので難しいわけではないと思います。

Btn

上のボタンをTailwind cssで記述すると

<p className="text-white bg-black flex justify-center items-center rounded-full w-12 h-12 ml-[10px]">
  Btn
</p>

このような感じになる。
クラス名を見る感じシンプルなので覚えやすいと思います。
mlはmargin-left,prはpadding-rightとか。 roundedはスタイルだとborder-radiusなので違いはあったりしますが、
何回か記述したら覚えると思います。
チートシートもあるのでこれ使いたい、とかだったら検索して見つけるのも簡単。

nerdcave.com

HTMLのclass部分が冗長になるけど、
CSSファイルに移動してクラス名考えて追加して…
という作業がいらなくなるのは大きいメリットかと。

Tailwind cssの導入方法

使うワークフレームによって若干かわりますが、
それは公式みて使いたいフレームワークの導入ページを見ればすぐ導入できます。

Framework Guides - Tailwind CSS

今回は自分が勉強しているNext.jsでの導入方法を紹介。 Install Tailwind CSS with Next.js - Tailwind CSS ↑ここに書いてあるのだけども…

ちなみにreact繋がりでもcreate-react-appは推奨はしていない模様。 POSTCSSなどの重要なツールとの互換性がないとのことです。

Install Tailwind CSS with Create React App - Tailwind CSS

1. プロジェクトの作成

ターミナルでプロジェクトフォルダにnextをインストールしてフォルダ内に移動する

npx create-next-app@latest my-project --typescript --eslint
cd my-project

2. Tailwind cssのインストール

ターミナルに以下入力。 postcssやautoprefixerを一緒に入れるとベンダープレフィックスとかもまとめて作ってくれたりするらしい？

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.jsが作成されるので、content部分をコピー

特に何も入れてない人は全文コピペでOK。 Next.jsのapp,pages,componentsにあるjs,ts,jsx,tsxにtailwindcssの記述があったら適応されるよ、みたいな感じでしょうか。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. globals.cssを差し替え

stylesフォルダ内にあるglobals.cssを全て消して、
以下をペースト。

@tailwind base;
@tailwind components;
@tailwind utilities;

5. サーバーを立ち上げて開発開始

ターミナルで以下を入力して、開発の開始。

npm run dev

これで導入完了です。

Next.jsを使って簡単にコーディングしてみる

sandboxでNext.jsとTailwind css でフォーマットされたテストページを
おいときます。

codesandbox.io

スクリーンサイズで表示を変更する方法

sandbox 24行目

<a href="#" className="block pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-gray-500 md:w-full md:mx-auto md:text-center  md:mb-4" >

のmd:をつけてからクラスをつけると、そのスクリーンサイズで適応される。スクリーンサイズの設定は自分でも変えられるが、基本は

md: min-width:768px; lg: min-width:1024px; xl: min-width:1280px;

となっている。モバイルファースト使用。

sandbox 51行目

<a href="#" className="hidden pt-4 px-5 pb-6 w-64 text-left no-underline text-gray-800 border border-gray-400 hover:border-blue-500 md:w-full md:mx-auto md:text-center md:block md:mb-4">

このaタグは小さいスクリーンサイズでは見えないが、スクリーンサイズが1024px以上になると表示されるようになる。

画像背景をつけたい場合

<div className="bg-[url('https://upload.wikimedia.org/wikipedia/commons/f/f0/Note_Logo_symbol_WhiteOnGreen.png')] bg-no-repeat bg-contain h-52 w-52">
        背景イメージつき
      </div>

背景画像を入れたい場合はbg-url('画像URL')を使うことで可能。リピートなし、containとかcoverの設定はbg-no-repeatbg-containなどで調整可能。

よく使うクラスをまとめておきたい

できることはできるが、ボタンなどほぼ変えることがないものだけに使用することが推奨されています。（ここでまとめてしまったら結局今までのCSS設計と変わらないためメリットが失われる）

まとめ

Tailwind css 今後の色々なプロジェクトで導入してくれないかなと個人的には思います。最初はHTMLのクラス記述が冗長になって気になる…と思っていたのですが使ってみると便利だしCSSに行き来しなくていいのは楽ですね。 Udemyの講義動画を見るのもわかりやすく感じます。

UdemyでPythonを勉強した結果を残すブログ。

40歳でプログラミング始めて転職までいけるのかを実録してみます。

Tailwind cssの導入から使い方までをさらっと学ぶ