Next.jsのCSS周りをTailwind CSS + stylelint + Storybookで整備する

Next.jsでTailwind CSSとStorybookをやりたいのだが

個別にTailwind CSSとStorybookをインストールしただけでは動きません。stylelintもTailwind CSSの@applyなどでエラーを出してきます。

これらの問題を解決していい感じにしていきます。

• Tailwind CSS
• stylelint
• Storybook

Next.jsのプロジェクトはこれで作成した想定で始めます。TypeScriptにしてますが必須ではないです。

yarn create next-app
mkdir src
mv pages styles src
touch tsconfig.json
yarn dev

Changelog

• tailwindcss 3に対応しました(2021/01/02)。
• stylelint 14.4.0で追加されたfunction-no-unknownに対応しました(2022/04/11)。

Tailwind CSS

Tailwind CSSとは

Tailwind CSSはUtility指向のCSSフレームワークです。BootstrapやMaterial DesignではComponentが用意されているため同じような見た目になりがちですが、Tailwind CSSはComponentは自分で用意するため各サイトで見た目がバラバラです。BootstrapのUtilitiesとHelpersだけを集めて拡張した感じでしょうか。

Tailwind CSSのインストールと設定

Next.js用の公式の手順に沿ってやるだけです。

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

Production Build時に不要なCSSを削除するためにtailwind.config.jsで設定します。

tailwind.config.js

module.exports = {
- content: [],
+ content: [
+   './src/pages/**/*.{js,ts,jsx,tsx}',
+   './src/components/**/*.{js,ts,jsx,tsx}',
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.cssを書き直します。

src/styles/globals.css

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

これで終了です。Tailwind CSSが使えるはずです。

export const Sample = () => (
  <div className="bg-red-500">Tailwind CSS</div>
);

Tailwind CSSを使いやすくするためにVSCodeを設定する

bradlc.vscode-tailwindcssをインストールします。他の開発者のために推奨プラグインにも記載しておきます。

.vscode/extensions.json

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
  ]
}

VSCodeの設定ファイルに色々と足します。

.vscode/settings.json

{
  // CSSのチェック機能をオフ
  "css.validate": false,

  // JSXでもCSSクラスを補完できるように
  "editor.quickSuggestions": {
    "strings": true
  },

  // emmetでTailwind CSSのクラスを使えるように
  "tailwindCSS.emmetCompletions": true,

  // Tailwind CSSのDirectivesをLintする
  "tailwindCSS.validate": true
}

stylelint

stylelintとは

stylelintはstylesのLinterです。ESLintのCSS版というところです。

stylelintのインストールと設定

stylelint-config-recommendedをextendしているstylelint-config-standardを採用しています。

yarn add -D stylelint stylelint-config-standard

stylelintの設定ファイルを作成します。Tailwind CSS特有のdirectiveとfunctionがエラーにならないようにat-rule-no-unknownとfunction-no-unknownに追加します。

.stylelintrc

{
  "extends": [
    "stylelint-config-standard"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind", "layer", "apply"]
      }
    ],
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": ["theme", "screen"]
      }
    ]
  }
}

stylelintはこのように実行します。

# チェック
yarn stylelint .

# 自動整形
yarn stylelint --fix .

CSSだけをチェックする

.jsonとは.tsxでstylelintのエラーを出されても意味が無いので、.css以外を無視するように設定します。

.stylelintignore

/node_modules
/.next
*.*
!*.css

Prettierと共存する

Prettierと競合するstylelintのルールをオフにするためにstylelint-config-prettierをインストールします。

yarn add -D stylelint-config-prettier

.stylelintrc

{
  "extends": [
-   "stylelint-config-standard"
+   "stylelint-config-standard",
+   "stylelint-config-prettier"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind", "layer", "apply"]
      }
    ],
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": ["theme", "screen"]
      }
    ]
  }
}

CSS Propertyの順番を制御する

• Twitter Bootstrapインスパイアのstylelint-config-recess-order
• 関係性のある項目をまとめるstylelint-config-rational-order
• 自分で設定する/アルファベット順のstylelint-order

今回はstylelint-config-rational-orderにします。

yarn add -D stylelint-config-rational-order

.stylelintrc

{
  "extends": [
    "stylelint-config-standard",
+   "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["tailwind", "layer", "apply"]
      }
    ],
    "function-no-unknown": [
      true,
      {
        "ignoreFunctions": ["theme", "screen"]
      }
    ]
  }
}

VSCodeでファイル保存時にstylelintで自動整形する

stylelint.vscode-stylelintをインストールします。他の開発者のために推奨プラグインに記載しておきます。

.vscode/extensions.json

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
+   "stylelint.vscode-stylelint"
  ]
}

VSCodeの設定ファイルでファイル保存時にstylelintで自動整形するように設定します。

.vscode/settings.json

{
+ "editor.codeActionsOnSave": {
+   "source.fixAll.stylelint": true
+ },

  // CSSのチェック機能をオフ
  "css.validate": false,

  // JSXでもCSSクラスを補完できるように
  "editor.quickSuggestions": {
    "strings": true
  },

  // emmetでTailwind CSSのクラスを使えるように
  "tailwindCSS.emmetCompletions": true,

  // Tailwind CSSのDirectivesをLintする
  "tailwindCSS.validate": true
}

Storybook

Storybookとは

StorybookはComponentのカタログを作成するツールです。各Componentの開発を独立させられるので、Atomic Designと相性が良いです。

Storybookのインストールと設定

yarn sb init

以下を実行すると通常ならStorybookが開きますが、PostCSSのバージョンがStorybookとTailwind CSSで違うためにエラーになるかもしれないです。

yarn storybook

StorybookとTailwind CSSのPostCSSのバージョンを合わせる。

そのうちStorybookもPostCSS 8を使うようになるでしょうが、それまでは手動でPostCSS 8を使うように設定する必要があります。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Storybookでwebpack@5を使うようにすると、PostCSS 8を使うようになるのでTailwind CSSとのpostcssのバージョン違い問題は解消します。Webpack5でStorybookを作り直します。

yarn sb init --builder webpack5 --force

StorybookをTailwind CSSに対応させる

このままだとStorybookでTailwind CSSのクラスが使えないので、Storybookの設定を変えます。

.cssに対してpostcss-loaderを使うようにWebpackの設定を変えます。postcssの設定はTailwind CSSが自動生成したpostcss.config.jsを使います。

.storybook/main.js

const { resolve } = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
+ "webpackFinal": async (config) => {
+   config.module.rules.push({
+     test: /\.css$/,
+     use: [
+       {
+         loader: 'postcss-loader',
+         options: {
+           postcssOptions: {
+             sourceMap: true,
+             config: resolve(__dirname, '..', 'postcss.config.js'),
+           },
+         },
+       },
+     ],
+   });
+
+   return config;
+ },
  "core": {
    "builder": "webpack5",
  },
};

preview.jsでglobal.cssをimportします。

.storybook/preview.js

+ import '../src/styles/globals.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

今度そこStorybookが開くはずです。Tailwind CSSも使えるはずです。

yarn storybook

さて

Next.js + Tailwind CSS + stylelint + Storybookの環境が整いましたが、大事なことを忘れていますね。Next.jsでCSSはどうやって書いてますか？

私はCSSはファイルを分けたいけど、Scoped CSSが欲しい人なのでCSS Modulesを使っています。Scoped CSSがサクッと手に入る世の中になることを切に願う。