【Next.js/Tailwind CSS】初めてのTailwind CSSとconfigの設定

次のPJでTailwind CSSを使うことになったので、Tailwind CSSを使って個人開発するべく備忘録として色々書いていきます。

create-next-appで立ち上げ

create-next-appのTailwind CSSをyesにして立ち上げて
globals.cssに以下のように修正する。

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

/* ↓ここより下は全消しでもOK */

tailwind.config.tsの設定

以下の記事を参考にしつつ、themeを設定
https://zenn.dev/var/articles/3cd463f2388a35

ここでふと気になったのですが、
立ち上げ時に作られたtailwind.config.tsファイルではextendが使われていて
参考記事にはextendの記載がなく、
この違いはなんなんだろうなーと思ったら違いは以下のようでした。

extendなし	extendあり
デフォルトの設定を上書きして設定	デフォルトの設定に追加する形で設定
1からカスタマイズしたい時に使用	追加でカスタマイズしたい時に使用

これは他のconfigファイルでも同じなようです。

具体例として

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    fontSize: {
      xs: ['0.5rem', { lineHeight: '1rem' }],
      sm: ['0.7rem', { lineHeight: '1.25rem' }],
    },
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};
export default config;

のように設定すると、
fontSizeを上書き設定、colorは追加設定として使えるのですね！

これって結構実装が進んできて、「xsのfontsizeもう少し大きくしたいんだよな」って時に
theme直下で設定するとxsのcssを当てているところが一括で変更できるので、そういうときには特に便利そうです🤩
これ部分的には変えられないようで、例えば以下のようにtheme直下にcolorsを追記すると
他のcolorsはリセットされちゃうみたいです😭

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    colors: {
      dustyPink: "#b5657e",
    },
  },
  plugins: [],
};
export default config;

なので基本的にはextendで追加の方が使いやすいかもしれない・・・

tailwind cssの基本の書き方

基本の書き方は以下のようにclassNameにインラインで直書きしていきます。

export const Header = () => {
  return <div className="bg-neutral-100 font-sans text-lg">Header</div>;
};

※Tailwind CSS IntelliSenseを使うと自動補完が効くので書きやすくなります

どんなクラスが用意されているかは下記で確認できます！
公式サイト
https://tailwindcss.com/docs/installation
とほほのTaiwind CSS入門（見やすい）
https://www.tohoho-web.com/ex/tailwind.html

Storybookとの併用

Storybookで確認してみると、スタイルが当たっていないので以下サイトに沿って設定します。
https://storybook.js.org/recipes/tailwindcss

とは言っても、やることといえば
.storybook/preview.tsに

import '../src/app/globals.css'

と追記するだけで完了です（笑

動的なスタイルの当て方や、layerなど
まだ調べたいことがありますが、一旦はここまでにします。