Go to Qiita Advent Calendar 2024 Top
LoginSignup
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@mizozobu

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

Last updated at Posted at 2021-05-04

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

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

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

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の順番を制御する

今回は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がサクッと手に入る世の中になることを切に願う。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?