naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

目次

最近更新された記事

🛬

Next.js 16 + next-intl で多言語化対応するための設定と注意点

2日前·2026年02月11日
  • Next.js
  • TypeScript
🍶

API-only Rails + GraphQL の rack-mini-profiler セットアップ

2日前·2026年02月11日
  • Rails
  • GraphQL
  • Next.js
🔍

Claude Code の Explore エージェントについて

6日前·2026年02月07日
  • Claude Code
🙃

Tailwind CSS メモ

公開日20日前2026-01-24
履歴GitHubで見る
MarkdownRaw Content
  • Tailwind
  • CSS

eslint-plugin-better-tailwindcss

GitHub - schoero/eslint-plugin-better-tailwindcss: ESLint plugin to help you write better tailwindcss by improving readability with formatting rules and enforcing best practices with linting rules.
ESLint plugin to help you write better tailwindcss by improving readability with formatting rules and enforcing best practices with linting rules. - schoero/eslint-plugin-better-tailwindcss
github.com favicon
github.com
GitHub - schoero/eslint-plugin-better-tailwindcss: ESLint plugin to help you write better tailwindcss by improving readability with formatting rules and enforcing best practices with linting rules.

HEADER_CLASS のような定数に定義したクラスを対象にする

eslint.config.mjs
const eslintConfig = defineConfig([
  // ...
    settings: {
      'better-tailwindcss': {
        variables: [
          [
            '^.*_CLASS$',
            [
              {
                match: 'strings',
              },
            ],
          ],
        ],
      },
    },
  // ...
])

VS Code の Tailwind CSS IntelliSense を使用している場合は .vscode/settings.json に以下を設定する。

settings.json
{
  // ...
  "tailwindCSS.experimental.classRegex": [
    // ...
    [".+CLASS.+=.+`([^`]*)`"],
    [".+CLASS.+=.+'([^']*)'"],
    [".+CLASS.+=.+\"([^\"]*)\""],
  ],
  // ...
}